Weird behaviour on custom made jQuery slider

Question

I thought it would be easy to create my own custom content slider with jQuery, and managed to create a decent one. Within the slider wrapper, I have a slider content and slider list. The slider is only showing one of three content areas.

This is the HTML for the slider:

<div id="featured_wrapper">

    <ul id="featured_content">

        <li class="item" id="item-3">
            <h1>Title item 3</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </li>

        <li class="item" id="item-2">
            <h1>Title item 2</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </li>

        <li class="item" id="item-1">
            <h1>Title item 1</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </li>

    </ul><!--/featured_content-->

    <ul id="featured_list">

        <li class="item-link" id="item-link-3">
            <div class="item-container">
                <h2>Title item 3</h2>
            </div>
        </li>

        <li class="item-link" id="item-link-2">
            <div class="item-container">
                <h2>Title item 2</h2>
            </div>
        </li>

        <li class="item-link" id="item-link-1">
            <div class="item-container">
                <h2>Title item 1</h2>
            </div>
        </li>

    </ul><!--/featured_list-->

</div><!--/featured_wrapper-->

#featured_content is the content div, and #featured_list is the list div.

This is the CSS:

#featured_wrapper { background: transparent url('/Files/System/web/gfx/featured_content_item_bg.jpg') repeat-x top left; overflow: hidden; }
#featured_content { float: left; height: 390px; width: 622px; background: transparent url('/Files/System/web/gfx/featured_content_item_bg.jpg') repeat-x top left; position: relative; }
#featured_content li { position: absolute; display: block; width: 622px; height: 390px; }
#featured_list { float: right; height: 390px; width: 338px; background: transparent url('/Files/System/web/gfx/featured_content_list_bg.png') repeat-y 0 -260px; }
.item-link { height: 70px; padding: 30px 20px 30px 45px; cursor: pointer; }
.item-link h2 { font-weight: bold; font-size: 16px; line-height: 1; }

And here is the jQuery code:

var bgpos    = new Array();
    bgpos[0] = -260;
    bgpos[1] = -130;
    bgpos[2] = 0;
$('#featured_content .item:not(:first-child)').css({'opacity': 0, 'margin-top': -20});
$('#featured_content .item:first-child').addClass('visible');
$('#featured_list .item-link').click(function(){

    var item = $(this).attr('id').split('-');
    var item_index = $(this).index();
    var item_id = 'item-' + item[2];

    /*
    $('#featured_content .item:not(#' + item_id + ')').fadeOut('fast');
    $('#featured_content #' + item_id).fadeIn('fast');
    */

    $('#featured_content .item:not(#' + item_id + ')').animate({
        marginTop: -20,
        opacity: 0
    }, 200).addClass('visible');

    $('#featured_content #' + item_id).animate({
        marginTop: 0,
        opacity: 1
    }, 200).removeClass('visible');

    $('#featured_list').stop().animate({'backgroundPosition': '(0 ' + bgpos[item_index] + 'px)'}, {duration: 200});

});

The problem is that even if the first item (item-3) is visible, the text isn't selectable, but the layer beneath it is. Try clicking the links in the content area on this test page I've set up:

http://dev.drumroll.no/jquery-slider-fail/

Answer 1

First, you seem to be adding and removing a class called 'visible' that doesn't exist in your style sheet.

Next, you're setting opacity to 0 when hiding, but that doesn't make the element go away. Whichever element is on top will still be the one receiving the click event, even though its opacity is 0.

Take this line of code...

    $('#featured_content .item:not(:first-child)').css({'opacity': 0, 'margin-top': -20});

and set the opacity to .20 instead of zero. You'll see the problem.

Here's a solution:

Change your code to the following:

$('#featured_content .item:not(:first-child)').css({'opacity': 0, display:'none', 'margin-top': -20});
$('#featured_content .item:not(#' + item_id + ')').animate({
                    marginTop: -20,
                    opacity: 0
                }, 200, function(){$(this).css({display:'none'});});

$('#featured_content #' + item_id).css({display:'block',opacity:0})
                                  .animate({
                    marginTop: 0,
                    opacity: 1
                }, 200);

Also, remove addClass('visible') and removeClass('visible') wherever it appears.

This will initially set each slider element to display:none (except, of course, for the first one). Then when fading out an element, there's a callback at the end of the animation to set display:none.

When fading In an element, you need to set display:block before the animation, and set opacity to 0 so you still get the fadeIn effect.