CSS Opacity Messing with Other CSS3 Transitions

Question

So I have a few hover links and I'm using the css3 transition effect on them. For some reason after I hover over a link that has opacity applied to it's element other links with the transition effect stop working. See the video so you can see what I mean: http://vimeo.com/14869503 - Password is stackoverflow for the video. I don't want the design to be totally public yet.

Any ideas on what could cause this or is it a bug? Any ways of solving it?

Thanks!

---

So here's the dev site that has the problem: http://dev.thriveafrica.org/

The css I have applied to navigation is this:

#nav-container #nav ul a {
    padding: 10px 10px 5px;
    background: url('images/nav/boy.png') no-repeat 0px 45px;
    text-decoration: none;
    color: #FFF;
    font-family: Bebas, Arial, Helvetica;
    font-size: 15px;
}
#nav-container #nav ul a:hover {
    background: url('images/nav/boy.png') no-repeat 0px 11px;
    color: #F15A29;
}

And the css I have applied to the elements with opacity on the right side:

    #home-right #store_items ul li {
    text-align: left;
    height: 70px;
    background: #FFF;
    margin: 10px 0;
    padding: 5px 0;
    border: 1px solid #EEE;

    opacity: 0.7;
    -moz-opacity: 0.7;
    filter:alpha(opacity=70);

    -moz-box-shadow: 1px 1px 2px #CCCCCC; /* FF3.5+ */
    -webkit-box-shadow: 1px 1px 2px #CCCCCC; /* Saf3.0+, Chrome */
    box-shadow: 1px 1px 2px #CCCCCC; /* Opera 10.5, IE 9.0 */

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;

    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

#home-right #store_items ul li:hover {
    opacity: 1.0;
    -moz-opacity: 1.0;
    filter:alpha(opacity=100);

    border: 1px solid #CCC;
}

    #home-right #store_items ul li a {
        color: #c24b00;
        display: block;
    }

Other than that theres no other css regarding these two elements. Sorry to get the code up so late. Thanks guys!

Answer 1

You probably have a bug on your Javascript code.

When you run the opacity buttons the error drops in and the rest of the transitions stop. Maybe we can debug further if you can post the code.

---

Edit: Do notice that you are using a CSS3 transition effect that will not work on the majority of browsers. You probably should revert to jQuery's effects to have it work cross-browser. So far the state of transition should be more or less like this:

Apple Safari (supported in Safari 3.1 and later, and in iPhone OS 2.0 and later.)
Google Chrome
Mozilla Firefox 3.7 alpha (also known as Minefield)
Opera 10.5x (also supported by Opera Mobile 10 beta 2)

---

Edit: I've now run your site and can see using Firefox and Firebug that the following function is throwing an error (generally errors are pretty critical to IE).

// on store_feed.js
jQuery.fn.random = function (amount) {
    var els = this.get();
    var ret = [];

    while (els.length && ret.length < amount) {
        ret.push(els.splice(Math.floor(Math.random() * els.length), 1)[0]);
    }

    return $(ret);
}

The error firebug throws:

$ is not a function
store_feed.js : return $(ret);

It seams you are calling the function without waiting for jQuery to be active.

Fix this and them we'll see if there's anything wrong with the CSS or if it's just JS.

And install Firebug! ;)