Jquery 鼠标悬停在图像fadein和fadout动画上

我正在尝试在img fadeIn和fadeOut动画上使用鼠标。这是我的密码。你能帮帮我吗

CSS JS

函数滑动开关（）{
var$active=$（'testID'+'IMG.active'）；
console.log（$active）
如果（$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（“活动”）
.animate（{opacity:1.0}，1000，function（））{
$active.removeClass（'active last active'）；
});
};
$（函数（）{
$（'.main.span.content'）。悬停(
函数（）{
$（this.next（'div'）.show（）.attr（'id'）；
var testID=$（this.next（'div'）.show（）.attr（'id'）；
$（函数（）{
设置间隔（“滑动开关（）”，2000）；
});
},
函数（）{
$（'.slideWrapper'）.hide（）；
});
});

HTML

弗斯特


第二


3.

试试这个

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();
    });
});

---

更新的Fiddle

您正在为元素的不透明度设置动画。为什么不使用fadeIn（）和fadeOut（）？我建议使用item.stop（）.fadeIn（）你能更详细地解释一下这段代码应该做什么吗？谢谢Rohan kumar。小帮助图像动画需要继续，而不是一次。

<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>

<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>

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();
    });
});