Question

我想使用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");
              });
         )};
});

Answer 1

使用回调（如果可能，例如。.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")的结果不随时间变化）

Answer 2

有几个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确保在重新生成之前加载图像。

Answer 3

请尝试以下示例并告诉我您是否可以：

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

完整参考：http://api.jquery.com/animate/并阅读有关完整功能的内容

如何按顺序运行两个不同的jquery函数？

3 个答案: