在 div 上悬停时停止答案

【问题标题】：Stop on hover on a div在 div 上悬停时停止
【发布时间】：2014-07-24 22:30:08
【问题描述】：

好的，所以我试图让悬停功能在我所在的 div 上工作，当我的鼠标离开悬停区域时，我将在悬停时暂停并重新启动。这是我到目前为止所拥有的

HTML

 <div id="slideshow">
 <div>
 <iframe width="400"; " height="290"; src="www.google.com"></iframe>
 </div>
 <div>
 <iframe width="400"; " height="290"; src="www.google.com"></iframe>
 </div>
 <div>
 <iframe width="400"; " height="290"; src="www.google.com"></iframe>
 </div>
 </div>

CSS

<style>
 #slideshow {  
position: relative; 
width: 340px; 
height: 340px; 
padding: 1px; 
box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
position: relative; 
top: 0px; 
left: 0px; 
right: 0px; 
bottom: 0px; 
}

</style>

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$("#slideshow > div:gt(0)").hide();
$("#slideshow").hover(function () { 
this.stop();
}, function () {
this.start();
});

setInterval(function() { 
$('#slideshow > div:first')
.fadeOut(0)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
},  10500);

</script>

任何有关此问题的帮助将不胜感激。我尝试了一些不同的方法，例如 .hover()、.stop() 和 clearInterval()。我认为我的执行是错误的。提前致谢。

【问题讨论】：

嗯... 在继续之前，您可能需要确保一切都有效！ 使用 W3 验证器
@Olivr3000 我会检查一下。但一切都在我这边完美运行。我只是无法让它在悬停时停止。

标签： javascript jquery html css jquery-hover

【解决方案1】：

您开始学习 javascript。您必须阅读文档并理解函数才能使用 api，如 jquery 和其他 javascript 库。请理解函数并使用 this.start() 和 this.stop() 在哪里定义它？

【讨论】：

【解决方案2】：

您可以在 mouseenter 事件上使用 clearInterval 实现您的目标。 试试这个

<!DOCTYPE html>
<html>
    <head>       
        <meta charset="utf-8">
        <title>slideshow</title>
        <style>
             #slideshow {  
                position: relative; 
                width: 400px;
                height: 290px;              
                box-shadow: 0 0 20px rgba(0,0,0,0.4); 
            }
            #slideshow iframe { 
                position: absolute; 
                top: 0px; 
                left: 0px;      
                height: 100%;   /* fit to parent */
                width: 100%;    
                display: none;      
            }
            #slideshow iframe:first-child{display:block;} /*Initially display  
                                                           the first iframe */
        </style>
    </head>
    <body>
        <div id="slideshow">
                <iframe src="http://www.example.com"></iframe> 
<!-- You cannot use www.google.com. The reason for this is, 
that Google is sending an "X-Frame-Options: SAMEORIGIN" response header. 
This option prevents the browser from displaying iFrames that are not hosted
 on the same domain as the parent page. -->

                <iframe src="http://www.example.com"></iframe>
                <iframe src="http://www.example.com></iframe>
        </div>
         <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>

            myinterval = doAnimation(); // Start the animation

            $('#slideshow').on({                    
                mouseenter: function(e){
                    clearInterval(myinterval); //stop animation
                  },
                mouseleave: function(e){      //restart animation 
                    myinterval = doAnimation();   
                  }
            });

          // Animate the slideshow.
            function doAnimation(){
                return setInterval(function(){
                    $('#slideshow :first-child')
                        .fadeOut()
                        .next('iframe')
                        .fadeIn()
                        .end()
                        .appendTo('#slideshow');
                    }, 2000);
            }

        </script>
    </body>
</html>

【讨论】：