如何将事件监听器添加到我的javascript函数

我的页面上有一个动画，将div滑动到屏幕中，将屏幕中的当前div推出。当它动画时，会发送ajax请求来抓取页面并将其放入div。如何将事件监听器添加到我的javascript函数

由于某些原因，我的代码在Firefox上可以正常工作，但使用Chrome浏览器时会出现断断续续的情况。

这里是页：（尝试一下左眼）

http://www.uvm.edu/~areid/homesite/index.html

我想做的事情（按照@ jfriend00的推荐）什么是事件监听功能添加到滑出式（）来使它成为ajax请求将不会启动，直到slideOut（）完成。分离ajax调用和动画应该会减少代码的负载，从而防止Chrome像现在一样结巴。

这里是我滑出功能：

JAVASCRIPT：

  function SlideOut(element) { 
       var opened = $(".opened"), 
        div = $("#" + element), 
        content = $("#content"); 
       opened.removeClass("opened"); 
       div.addClass("opened"); 
       content.removeClass().addClass(element); 
      }

CSS：

#content { 
     margin: 0 auto; 
     position:relative; 
     left:0; 
     -webkit-transition: all 0.9s ease; 
     -moz-transition: all 0.9s ease; 
     -o-transition: all 0.9s ease; 
     transition: all 0.9s ease; 
    } 
    #content.right { 
     left:-1150px; 
    } 
    #content.left { 
     left:1150px; 
    } 
    #content.bottom { 
     top:-300px; 
    } 
    #content.top { 
     top:1100px; 
    } 

    #content div { 
     cursor:pointer; 
    #left { 
     padding:0; 
     margin:0; 
     position:absolute; 
     top:0; 
     left:-1800px; 
     height:100%; 
     width:1750px; 
     -webkit-transition: all 0.9s ease; 
     -moz-transition: all 0.9s ease; 
     -o-transition: all 0.9s ease; 
     transition: all 0.9s ease; 
     background-color: #1a82f7; 
     /* Safari 4-5, Chrome 1-9 */ 
     background: -webkit-gradient(linear, left top, right top, from(#C6421F), to(#2F2727)); 
     /* Safari 5.1, Chrome 10+ */ 
     background: -webkit-linear-gradient(right, #C6421F, black); 
     /* Firefox 3.6+ */ 
     background: -moz-linear-gradient(right, #C6421F, black); 
     /* IE 10 */ 
     background: -ms-linear-gradient(right, #C6421F, black); 
     /* Opera 11.10+ */ 
     background: -o-linear-gradient(right, #C6421F, black); 
    } 

    #left.opened { 
     left:0; 
    } 
    #left-content{ 
     margin-left:70px; 
     position:relative; 
     -webkit-transition: all 0.9s ease; 
     -moz-transition: all 0.9s ease; 
     -o-transition: all 0.9s ease; 
     transition: all 0.9s ease; 
    }

HTML：

<html> 
<body> 
<div id="fullContainer"> 

    <div id="right"> 
     <div class="return-right"> 
      <p>click me</p> 
     </div> 
     <div id="resume"> 
     </div> 

    </div> 
    <div id="left"> 

      <div class="return-left"> 
     <p>click me</p> 
     </div> 
      <div id="left-content"> 
     </div> 


    </div> 
    <div id="top"> 
      <div class="return"> 
     <p>click me</p> 
     </div> 

    </div> 
    <div id="bottom"> 
      <div class="return"> 
     <p>click me</p> 
     </div> 

    </div> 
</div> 
<div id="centerContainer"> 
    <div id="relativeContainer"> 
     <div id="content" class="center"> 
    </div> 
    </div> 
</div> 
</body> 
</html>

它可能是最好只使用萤火在实际的网站上。

谢谢！

来源

2012-10-31 katie bekell

你会做AJAX调用，然后再成功后，运行动画。 – thescientist

当我这样做，铬似乎只是等到内容被加载，然后只是把页面放在屏幕上 - 没有滑动 –

您将要使用transitionend事件来追踪＃left的转换完成时间。你将不得不检查我在下面完成的浏览器前缀。之后，我们可以使用指定的前缀和听。一旦被解雇，你可以打你的ajax电话。

的Javascript：

var myDiv, transition; 
myDiv = document.getElementById('left'); 

if('ontransitionend' in window) { 
    // Firefox 
    transition = 'transitionend'; 
} else if('onwebkittransitionend' in window) { 
    // Chrome/Saf (+ Mobile Saf)/Android 
    transition = 'webkitTransitionEnd'; 
} else if('onotransitionend' in myDiv || navigator.appName == 'Opera') { 
    // Opera 
    // As of Opera 10.61, there is no "onotransitionend" property added to DOM elements, 
    // so it will always use the navigator.appName fallback 
    transition = 'oTransitionEnd'; 
} else { 
    // IE - not implemented (even in IE9) :(
    transition = false; 
} 

myDiv.addEventListener(transition, function(){ 
    //make ajax call here. 
}, false);

来源

2012-10-31 23:03:49

这似乎是完美的 - 在Chrome中很好地工作，但不会在Firefox中工作。任何想法？谢谢reza –

我忘了包括mozTransitionend。我可能有一个更简单的方法来做到这一点。 –

$（“＃left”）。bind（“webkitTransitionEnd mozTransitionEnd oTransitionEnd msTransitionEnd transitionend”，function（）{ // ajax call }）; –

如何将事件监听器添加到我的javascript函数

回答

相关问题