Question

我来自as3，我对jQuery有点失落。我感觉我还没有掌握事件如何与jQuery一起工作的概念，或javascript的重要性。我正在尝试这样做：

animation 1 ends --> load image --> animation 2 starts

到目前为止，我通过.animate（）中的complete：function（）{}参数执行此操作。它有效，但不是很灵活。

如何设置这样的场景？：

*

addEventListener(when animation 1 ends, do whatever)

addEventListener(when image loading ends, do whatever)

addEventListener(when animation 2 ends, do whatever)

*

我尝试使用.bind（）和.live（），比如$（window-document-div-etc）.bind（'load'，'存储在变量中的动画'等）没有结果。有关如何做的任何建议吗？

提前致谢

首先，感谢大家的帮助。

很抱歉使用这个“回答您的问题”功能，我还没有能够使用“添加评论”链接，毕竟，我发现有点傻到每个人都回答相同的答案。如果有任何类型的主持人，请将其移至应移动的任何地方。

请原谅我缺乏适当的技术语言。这个“回调函数”方法是我最初使用的方法，它工作正常，但结果代码不是非常可重用。

我想知道怎么可能用封装来写一些更尊重的东西，比如：

Image A is loaded, event is dispatched "IMAGE LOADED"

Totally unrelated Object B has a listener for the "IMAGE LOADED" event, so receives  the event and processes it through its method bDoesThis().


Totally unrelated Object C has a listener for the "IMAGE LOADED" event, so receives the event and processes it through its method cDoesThat().

再次感谢！

Answer 1

我认为你指的是Callback Functions。

$('div').animate({
    left: 50
}, 500, function() {
    // animation completed.
    $(this).hide();
});

$('img').bind('load', function() {
    // Callback (image has loaded)
    $(this).fadeIn(200);       
});

Answer 2

您将事件绑定到使用$（选择器）格式获得的对象，例如$（document）或$（'＃yourElementid'），并使用bind或live添加事件处理程序。 Live的优势在于，任何与选择器匹配的新创建元素都会自动使用您的事件处理程序进行绑定。例如，

 $('.clickme').bind('click', function()
    {//event handler.
      $(".block:first").animate({"left": "+=50px"}, "slow" , "swing", function(){
        //animation 1 ends.do whatever in callback
      });
    };

您也可以使用$('.clickme').click(function(){});作为快捷方式而不是繁琐的$('.clickme').bind('click',function(){})语法。

Answer 3

您可以使用回调函数和图像的事件侦听器，如下所示：

// select what you want to animate, and do some animation
// set a callback function to execute upon completion
$('div').animate({width:100},2000,function(){
    // in the callback - create a new IMG element
    $('div').html('<img id="newImage" src="http://farm7.static.flickr.com/6085/6027474363_42050547b2_b.jpg" />')
    // set an event listener for your IMG element
    $('#newImage').load(function(){
        // do second animation
        $('div').animate({width:800},2000)
    })
})

您可以在此处查看此代码的演示：http://jsfiddle.net/fePzu/

关于在jquery中设置事件监听器的基本问题

3 个答案: