3

我想使用 jQuery 制作滑动图像的效果。当我单击图像时，我想 1) 将框架宽度设为零，2) 更改为另一个图像，以及 3) 再次将框架宽度设为 100%。我使用了以下代码，无论我做什么，图像都会在帧扩展回 100% (1-> 3-> 2) 之前先发生变化。我尝试使用回调函数，但无法弄清楚。请问有什么建议吗？

$("#frame img").click(function(){
    $("#frame").animate({width:"0%", height:"100%"}, "slow"); //1
    $("#frame img").attr({src:"images2.png"}); //2
    $("#frame").animate({width:"100%", height:"100%"}, "slow"); //3
});

以下是我尝试过的回调函数（我认为这是完全错误的）：

$("#frame img").click(function(){
    $("#frame").animate(({width:"0%", height:"100%"}, "slow"), function(){
         $("#frame img").attr(({src:"images2.png"}), function(){
              $("#frame").animate({width:"100%", height:"100%"}, "slow");
              });
         )};
});
4

3 回答 3

2

使用回调（如果可能，例如.attr()不支持回调）：

$("#frame img").click(function(){
    $("#frame").animate({width:"0%", height:"100%"}, "slow", function(){
        // a callback executed, when the first animation completes
        $("#frame img").attr({src:"images2.png"});
        $("#frame").animate({width:"100%", height:"100%"}, "slow");
    });
});

但是您的代码可以进行优化。其中一种方法可能如下所示：

var frame = $("#frame"); // cache frame
var images = frame.find("img"); // cache images within frame
images.click(function(){
    frame.animate({width:"0%", height:"100%"}, "slow", function(){
        // a callback executed, when the first animation completes
        images.attr({src:"images2.png"});
        frame.animate({width:"100%", height:"100%"}, "slow");
    });
});

（当然除非结果不随时间而改变$("#frame")）$("#frame img")

于 2012-06-08T23:46:43.520 回答
1

有几个 jQuery 插件可以满足您的需求......如果我找到它，我会评论这个答案。现在，您可以这样做。

$("#frame img").click(function(){
    $("#frame").animate({width:0}, "slow", function(){
        $("#frame img").attr({src:"images2.png"}).ready(function(){
            $("#frame").animate({width:$("#frame img").width()}, "slow");
        });
    });
});

.ready 确保在重新动画之前加载图像。

于 2012-06-08T23:48:00.390 回答
0

试试下面的例子，告诉我它是否适合你：

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

如需完整参考：http ://api.jquery.com/animate/并阅读完整功能

于 2012-06-08T23:49:28.203 回答