另一格时格当我在底部，只显示了一点点，（div有width:100%;），我想这个div与一mouseovereffect向上移动，并在同一时间推悬停一个div屏幕中央的标志向上。我想使用jQuery，因为没有其他的工作。当鼠标离开格，我想在div回落到躲藏。他们是身体内的两个div。将徘徊与jQuery
下面是HTML的部分和css：code
我希望有人知道如何使一个JavaScript，使这个悬停功能在那里徘徊一个div移动另一个div然后回到正常。
这是否帮助
使用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（也一次跳跃效果）
所以我的摘录可以给你如何实现你的需求的想法。
首先你会想到你的布局......从我的观点来看，有一些CSS风格是没有意义的。那么你可以使用jQuery动画来做到这一点，但下面的示例将不起作用，因为你将选择器从id更改为class。 – 2014-09-20 18:17:49
请看下面的答案并接受合适的答案，这样这个问题就不会在未答复的部分中加载 – Pbk1303 2014-09-22 21:54:54