将徘徊与jQuery

问题描述：

另一格时格当我在底部，只显示了一点点，（div有width:100%;），我想这个div与一mouseovereffect向上移动，并在同一时间推悬停一个div屏幕中央的标志向上。我想使用jQuery，因为没有其他的工作。当鼠标离开格，我想在div回落到躲藏。他们是身体内的两个div。将徘徊与jQuery

下面是HTML的部分和css：code

我希望有人知道如何使一个JavaScript，使这个悬停功能在那里徘徊一个div移动另一个div然后回到正常。

首先你会想到你的布局......从我的观点来看，有一些CSS风格是没有意义的。那么你可以使用jQuery动画来做到这一点，但下面的示例将不起作用，因为你将选择器从id更改为class。 – 2014-09-20 18:17:49

请看下面的答案并接受合适的答案，这样这个问题就不会在未答复的部分中加载 – Pbk1303 2014-09-22 21:54:54

答

这是否帮助

使用jQuery animate你可以动画的div轻松的运动..

<div id="box1"></div> 
<div id="box2"></div> 
<style type="text/css"> 

    #box1 
    { 
     width: 100px; 
     height: 100px; 
     background-color: red; 
    } 

    #box2 
    { 
     width: 100px; 
     height: 100px; 
     background-color: yellow; 
     margin-top: 10px; 
    } 
</style> 

<script type="text/javascript"> 


$("#box1").hover(function(){ 
    //alert("hover"); 
    $("#box2").animate({marginLeft: "200"}); 

}); 
$("#box1").mouseleave(function(){ 

    $("#box2").animate({marginLeft: "0"}); 

}); 
</script>

答

有哪些需要在代码中做出一些改变，

1）你给jQuery中class boks1，但这样的类没有在你的代码存在。

2）您可以结合mouseover和mouseout中的hover函数本身。

jQuery的

$(document).ready(function() { 
    $(".box1").hover(function() { // on hover 

     $(".box").css("margin-top", "-20px"); 
    },function() {//on mouseout 
      $(".box").css("margin-top", "20px"); 
    }); 
});

答

像这样的东西应该工作（如果我明白你的问题）。

我只更改了jQuery和CSS的一行（.box中的最后一行更改为transition: background 0.4s 0.5s, margin 0.4s;）。

$(document).ready(function() { 
 
    $(".textarea").hover(
 
     function() { 
 
      $(this).height($(this).height() + 200); 
 
      $(".box").css("margin-top", "-200px"); 
 
     }, 
 
     function() { 
 
      $(this).height($(this).height() - 200); 
 
      $(".box").css("margin-top", ""); 
 
     } 
 
    ); 
 
});

@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
html { 
 
\t background: url(bilder/backnormal.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 

 
.textarea { 
 
\t background: rgba(255,255,255,0.5); 
 
\t width: 100%; 
 
\t float: left; \t 
 
\t position: relative; 
 
\t -webkit-transition: all 0.3s linear; 
 
\t -moz-transition: all 0.3s linear; 
 
\t -ms-transition: all 0.3s linear; 
 
\t -o-transition: all 0.3s linear; 
 
\t transition: all 0.3s linear; 
 
} 
 

 

 
.box1, .box2 { 
 
\t color: #666; 
 
\t height: 57%; 
 
\t margin-top: 0px; 
 
\t margin-bottom: 0px; 
 
\t margin-right: 0px; 
 
\t text-align: left; 
 
\t padding-left: 350px; 
 
\t 
 
\t transition: background-color 0.5s ease-in-out; 
 
\t float: left; 
 
\t 
 
} 
 

 
.box1:hover, .box2:hover { 
 
\t background: rgba(255,255,255,0.2); 
 
transition: background-color 0.5s ease-in-out; 
 

 
} 
 

 
/*________*/ 
 

 
.box { 
 
\t width: 300px; 
 
\t height: 400px; 
 
\t position: relative; 
 
\t background: rgba(255,255,255,0); 
 
\t display: inline-block; 
 
\t float: left; 
 

 
\t margin-top: 10%; 
 
\t margin-bottom: 10%; 
 
\t margin-left: 35%; 
 
\t margin-right: 35%; 
 
\t cursor: default; 
 
\t text-align: center; 
 
\t -webkit-transition: background 0.4s 0.5s; 
 
\t transition: background 0.4s 0.5s, margin 0.4s; 
 
} 
 
    
 
.box:hover { 
 
    background: rgba(255,255,255,0.2); 
 
    -webkit-transition-delay: 0s; 
 
    transition-delay: 0s; 
 
} 
 

 
.logo { 
 
\t width: 90%; 
 
\t padding-top: 20%; 
 
}

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

 

 
<div class="menu"> 
 
</div>  
 
    
 
<div class="box"> 
 
    \t \t 
 
    \t \t <img src="bilder/logouten.png" class="logo" /> 
 
</div> 
 
    
 
<div class="textarea"> 
 
    \t \t <div class="box1"> 
 
     \t \t <h1>hello</h1> 
 
     \t \t <p>textexttextextextextexttextextxtxtexetxtextextextetex</p> 
 
\t \t \t </div> 
 
      <div class="box2"> 
 
       <h1>hello again</h1> 
 
       <ul> 
 
        <li>textext</li> 
 
     
 
        <li>haethaethaethaefgae</li> 
 
     
 
        <li>wordswordswords</li> 
 
       </ul> 
 
\t \t \t </div> 
 
</div> 
 

 
<footer> 
 
</footer> 
 
    
 

 

 
</body> 
 

 
</html>

答

这里是我的解决方案：

$(".textarea").hover(
    function() { 
     $('.textarea, .box').stop().animate({top: '-200px'}); 
    }, function(){ 
     $('.textarea, .box').stop().animate({top: '0'});   
});

看到Fiddle

为了您的信息：您的代码并没有因为在你的jQuery选择错字的工作。我还提到，您使用的浮动保持一定时间，这是没有意义的，因为你有其他风格否决它。

我动画顶部位置，因为保证金不会做正确的事。当使用边距时，动画在没有空间时停止。

我上触发texarea悬停它因为...覆盖孔的宽度。使用.box itselfe时，您将在悬停效果期间失去焦点。这将最终产生跳跃效应。

我也是我们停止功能来清除quehe otherwhise每悬停事件将被存储在triggerd（也一次跳跃效果）

所以我的摘录可以给你如何实现你的需求的想法。

将徘徊与jQuery

相关推荐