Question

I have a jquery banner cycle with navigation that auto rotates. The navigation is set up in a list, where the active slide has an LI class of activeSlide:

<ul id="billboard-nav">
    <li class="activeSlide"><span class="overlay">NAV1</span></li>
    <li><span class="overlay">NAV2</span></li>
    <li><span class="overlay">NAV3</span></li>
</ul>

Jquery set so .overlay is opacity 0, and on hover, it changes to opacity 1.

<script>
$(function() {  

    $("#billboard-nav li .overlay").css({ opacity: 0 });

    $("#billboard-nav li").hover(
        function() {$(this).children('.overlay').stop().animate({"opacity": "1"}, 100);},
        function() {$(this).children('.overlay').stop().animate({"opacity": "0"}, 1200);}
    );

});
</script>

This works well, except I need the .activeSlide .overlay to stay at opacity: 1. I can set opacity:1!important through the stylesheet, but this is CSS3 and not supported by ie7,8. A JS solution would be much preferred.

Any help would be appreciated. Thank you.

Answer 1

Just add a Condition and check if the current li has a activeSlide class.. If yes then do nothing..

$(function() {

    $("#billboard-nav li .overlay").css({
        opacity: 0
    });

    $("#billboard-nav li").hover(

    function() {
        $(this).children('.overlay').stop().animate({
            "opacity": "1"
        }, 100);
    }, function() {
        if ($(this).hasClass('activeSlide')) {
           // Because this has ActiveSlide class do nothing
        }
        else {

            $(this).children('.overlay').stop().animate({
                "opacity": "0"
            }, 1200);
        }
        });

    });​

check FIDDLE here