鼠标悬停在图像淡化和淡出动画上

Question

我正在尝试将鼠标移到img fadeIn和fadeOut动画上。这是我的代码。你能帮我吗？

CSS

    .slideWrapper{
     display:none;
    }
.slideshow {
    position:relative;
    height:350px;
}

.slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

.slideshow IMG.active {
    z-index:10;
}

.slideshow IMG.last-active {
    z-index:9;
}

JS

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script type="text/javascript">
function slideSwitch() {
        var $active = $('testID' + 'IMG.active');
        console.log($active)

        if ( $active.length == 0 ) $active = $('testID' + 'IMG:last');

        var $next =  $active.next().length ? $active.next()
            : $('testID' + 'IMG:first');

        $active.addClass('last-active');

        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
        };
$(function(){
    $('.mainWrapper li span.content').hover(
    function(){
        $(this).next('div').show().attr('id');
        var testID = $(this).next('div').show().attr('id');
        $(function() {
            setInterval( "slideSwitch()", 2000 );
        });
    },
    function(){
        $('.slideWrapper').hide();
    });
});
</script>

HTML

<div class="mainWrapper">
    <ul>
        <li>
            <span class="content">First</span>
            <div class="slideWrapper slideshow" id="imageID1">
                <img src="http://lorempixel.com/400/200/" alt="" class="active" title="Image1" />
                <img src="http://lorempixel.com/400/201/" alt="" title="Image2" />
                <img src="http://lorempixel.com/401/200/" alt="" title="Image3" />
            </div>
        </li>
        <li>
            <span class="content">Second</span>
            <div class="slideWrapper slideshow" id="imageID2">
                <img src="http://lorempixel.com/399/199/" alt="" class="active" title="Image1" />
                <img src="http://lorempixel.com/398/199/" alt="" title="Image2" />
                <img src="http://lorempixel.com/398/198/" alt="" title="Image3" />
            </div>
        </li>
        <li>
            <span class="content">3</span>
            <div class="slideWrapper slideshow" id="imageID3">
                <img src="http://lorempixel.com/199/399/" alt="" class="active" title="Image1" />
                <img src="http://lorempixel.com/198/399/" alt="" title="Image2" />
                <img src="http://lorempixel.com/198/398/" alt="" title="Image3" />
            </div>
        </li>
    </ul>
</div>

Answer 1

试试这个，

function slideSwitch(testID) {
    // Don't use id as a string it is a variable
    var $active = $('#'+testID + ' IMG.active');
    console.log(testID)
    if ( $active.length == 0 ) $active = $('#'+testID + 'IMG:last');
    var $next =  $active.next().length ? $active.next()
          : $('#'+testID + ' IMG:first');// give a space between id and selector
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
         .addClass('active')
         .animate({opacity: 1.0}, 1000, function() {
             $active.removeClass('active last-active');
         });
}
var clrint=null;// clear Interval
$(function(){
    $('.mainWrapper li span.content').hover(
    function(){
        $(this).next('div').show().attr('id');
        var testID = $(this).next('div').show().attr('id');
        $(function() {
            //pass testID to function from here
            clrint=setInterval( function(){slideSwitch(testID)}, 2000 );
        });
    },
    function(){
        clearInterval(clrint);
        $('.slideWrapper').hide();
    });
});

更新小提琴 http://fiddle.jshell.net/G4LU6/1/