Question

所以我试图用jquery幻灯片制作这种“幻灯片”。我现在就拥有它，以便在我悬停时图像会滑动，但如果用户没有悬停在图像上，我希望其中一个图像始终展开。

如果您想要实时视图，请参阅测试页面http://www.johnnyedick.com/indexSlideUpTop.html。

这是我正在使用的jquery：

$(function() {

                $('#box1').hover(function() {
                    $(this).stop().animate({ "width" : "530px"}, 1000);
                }, function() {
                    $(this).stop().animate({ "width" : "100px"}, 1000);
                    });

                    $('#box2').hover(function() {
                    $(this).stop().animate({ "width" : "530px"}, 1000);
                }, function() {
                    $(this).stop().animate({ "width" : "100px"}, 1000);
                    });

                    $('#box3').hover(function() {
                    $(this).stop().animate({ "width" : "530px"}, 1000);
                }, function() {
                    $(this).stop().animate({ "width" : "100px"}, 1000);
                    });
            });

由于

Answer 1

我写了一个简单的函数：http://jsfiddle.net/skip405/9NVWt/2/。可能它会很有用。我相信在jQuery中经验丰富的人可以进一步完善它，我只是一个新手

Answer 2

更新

    $(function() {
    $('#box1, #box2, #box3').hover(function() {
        $(this).stop().animate({ "width" : "530px"}, 1000)
            }, function() {
                $(this).stop().animate({ "width" : "100px"}, 1000);
                   }).mouseleave(function(){
                     jQuery.fx.off = true;
                         });

Answer 3

在悬停功能代码

之后添加此代码

$('#box3').css('width','530px') ;

当页面显示正常大小的第3个div时

Jquery Slides，我希望一直打开

3 个答案: