所以我正在尝试使用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);
});
});
谢谢
我写了一个简单的函数:http://jsfiddle.net/skip405/9NVWt/2/。可能它会很有用。我相信它可以由在jQuery方面更有经验的人进一步完善,我只是一个新手
在悬停函数代码之后添加此代码
$('#box3').css('width','530px') ;
当页面进入显示正常大小的第三个div时
更新:
$(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;
});