0

所以我正在尝试使用 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);
                    });
            });

谢谢

4

3 回答 3

1

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

于 2012-04-28T20:29:21.883 回答
0

在悬停功能代码之后添加此代码

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

当页面出现第三个 div 时显示正常大小

于 2012-04-28T20:21:45.790 回答
0

更新:

    $(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;
                         });
于 2012-04-28T19:58:12.823 回答