Javascript 在鼠标上方隐藏一个div_Javascript_Jquery

Javascript 在鼠标上方隐藏一个div

javascript jquery

Javascript 在鼠标上方隐藏一个div,javascript,jquery,Javascript,Jquery,我正在使用jquery根据此处给出的代码创建幻灯片- 这是示例代码： <html> <head> <style> .fadein { position:relative; width:500px; height:332px; } .fadein img { position:absolute; left:0; top:0; } </style> <script src="http://ajax.googleapis.com/ajax/libs

我正在使用jquery根据此处给出的代码创建幻灯片-

这是示例代码：

<html>
<head>
<style>
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});



</script>
</head>
<body>
<div class="fadein">
  <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
  <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
  <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
<a href="#"><img id="try" src="http://freeimagesarchive.com/data/media/29/12_sky.jpg" /></a>
</body>
</html>


.fadein{位置：相对；宽度：500px；高度：332px；}
.fadein img{位置：绝对；左侧：0；顶部：0；}
$（函数（）{
$（'.fadein img:gt（0）'）.hide（）；
setInterval（函数（）{
$（'.fadein:first child'）.fadeOut（）
.next（'img'）.fadeIn（）
.end（）.appendTo（'.fadein'）；}，
3000);
});

我想要的是，当我用id try将鼠标悬停在图像上时，幻灯片应该隐藏一段时间，并显示一个静态图像，然后在几分钟后重新播放。我对jquery非常熟悉，有人能帮我解决这个问题吗？？

Thanx.

如果我正确理解您的要求

这就是解决办法

我刚刚为image元素try添加了两个事件监听器（，），并使用了两个变量来跟踪悬停状态和幻灯片放映图像源

var tryHovered = false;
var actualSrc = '';
$('.fadein img:gt(0)').hide();
setInterval(function() {
if(!tryHovered){
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}
}, 3000);



$('#try').mouseenter(function(e) {
     tryHovered = true;
     actualSrc = $('.fadein :first-child').attr('src');
    $('.fadein :first-child').attr('src', this.src);//Replace this.src with any other static image path that you want to display.
}).mouseleave(function(e) {
     tryHovered = false;
     $('.fadein :first-child').attr('src', actualSrc);
});

如果我正确理解你的要求

这就是解决办法

我刚刚为image元素try添加了两个事件监听器（，），并使用了两个变量来跟踪悬停状态和幻灯片放映图像源

var tryHovered = false;
var actualSrc = '';
$('.fadein img:gt(0)').hide();
setInterval(function() {
if(!tryHovered){
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}
}, 3000);



$('#try').mouseenter(function(e) {
     tryHovered = true;
     actualSrc = $('.fadein :first-child').attr('src');
    $('.fadein :first-child').attr('src', this.src);//Replace this.src with any other static image path that you want to display.
}).mouseleave(function(e) {
     tryHovered = false;
     $('.fadein :first-child').attr('src', actualSrc);
});

使用jQuery

.delay（）

可以将整个

.fadein

div隐藏多少秒

使用jQuery

.delay（）

可以将整个

.fadein

div隐藏多少秒

我认为让别人为你写代码是不公平的。通常情况下，人们来到这里时会遇到一些问题，尽管他们在研究上投入了大量时间，但仍然无法解决。实际上，我只是尝试了一些代码，但它不起作用，所以我只是粘贴了一部分工作正常的代码。从今往后，我会记住您的想法：）我认为让别人为你写代码是不公平的。通常情况下，人们来到这里时会遇到一些问题，尽管他们在研究上投入了大量时间，但仍然无法解决。实际上，我只是尝试了一些代码，但它不起作用，所以我只是粘贴了一部分工作正常的代码。从今往后，我会记住您的想法：）嘿，thanx，这正是我想要的：）我现在也可以像下面那样淡入图像：

$（'#try'）.mouseenter（函数（e）{tryhored=true；actualSrc=$（'.fadeIn:first child'）.attr（'src'）；$（'.fadeIn:first child'）.hide（）；$（'.fadeIn:first child'）.attr'）.src'）.fadeIn（1000）；）mouseleave（函数（e）{tryHovered=false；$（'.fadein:first child'）.hide（）；$（'.fadein:first child'）.attr（'src'，actualSrc）.fadein（1000）；}）；嘿，thanx，这正是我想要的：）我现在也可以像下面那样淡入图像：$（'try'）.mouseenter（函数（e）{tryhored=true；actualSrc=$（'fadeIn:first child'）.attr（'src'）；$（'fadeIn:first child'）.hide（）；$（'fadeIn:first child'）.attr（'src'，this.src.）.fadeIn（1000）；）mouseleave（函数（e）{tryHovered=false；$（'.fadein:first child'）.hide（）；$（'.fadein:first child'）.attr（'src'，actualSrc）.fadein（1000）；}）；