2013-02-13 79 views
1

我看到了一个小提琴。当光标悬停在它上面时,它从下到上进行动画处理。如何从右向左滑动使用div显示内容

我该如何改变它,以便在点击时,它会从右到左进行动画制作,然后,内容会被隐藏起来?当内容被隐藏时,会出现一个按钮,我可以点击该按钮让内容再次显示。

HTML

<html> 
<body> 
<div class="wrapper"> 
<div class="inner"> 
    Sliding div here!! Yay!! 
    </div> 
    </div> 
    <p>Hover over red div please!!</p> 
</body> 
</html> 

CSS

.wrapper{ 
background-color:red; 
    width:200px; 
    height:200px; 
    position:relative; 
    overflow:hidden; 
    color:white; 
} 

.inner{ 
    width:200px; 
    height:100px; 
    position:absolute; 
    background-color:black; 
    margin-top:200px; 
color:white; 
} 

jQuery的

$(document).ready(function(){ 
var innerHeigth = $(".inner").outerHeight(); 
$(".wrapper").hover(function(){  $(".inner").stop().animate({top:-innerHeigth},1000); 
//alert(innerHeigth) 
},function(){ 
$(".inner").stop().animate({top:0},1000); 

}); 
}); 

,这里是小提琴http://jsfiddle.net/qGVfp/

回答

1

有你需要做2度的变化。第一调节样式表,以便移动DIV是关闭的左,而不是底部:

.inner{ 
    width:200px; 
    height:100px; 
    position:absolute; 
    background-color:black; 
    left:-200px; 
    color:white; 
} 

,然后改变JavaScript来的点击反应,可根据宽度和修改左属性。请注意,有一种切换方法的行为非常像悬停,但它已从jQuery中移除,因此您必须具有一个跟踪状态的布尔值。

$(document).ready(function(){ 
    var width = $(".inner").width(); 
    var toggle = true; 
    $(".wrapper").click(function(){ 
     if(toggle) { 
      $(".inner").stop().animate({left:0},1000); 
     } else { 
      $(".inner").stop().animate({left:-width},1000); 
     } 
     toggle = !toggle; 
    }); 
}); 

这里有一个更新的小提琴:http://jsfiddle.net/qGVfp/30/

+0

这个点击是怎么样的,点击显示并再次点击隐藏 – 2013-02-13 05:03:00

+0

@FrancisAlvinTan我更新了我的答案,它现在点击切换。 – 2013-02-13 14:04:32

0
.wrapper2{ 
    background-color:blue; 
    width:400px; 
    height:200px; 
    position:relative; 
    overflow:hidden; 
    color:white; 
} 

.inner2{ 
    width:200px; 
    height:200px; 
    position:absolute; 
    background-color:black; 
    margin-left:400px; 
    color:white; 
} 


$(".wrapper2").hover(function(){  
     $(".inner2").stop().animate({marginLeft:200},1000); 
//alert(innerHeigth) 
    },function(){ 
     $(".inner2").stop().animate({marginLeft:400},1000); 
    }); 
}); 

http://jsfiddle.net/bighostkim/vJrJh/

0

你基本上是有只需要改变周围的一些东西。

HTML

<!DOCTYPE html> 
<html> 
<body> 
    <div class="wrapper"> 
     <div class="inner"> 
      Sliding div here!! Yay!! 
     </div> 
    </div> 
    <button id="btn">click</button> 
</body> 
</html> 

CSS

.wrapper { 
    background-color:red; 
    width:200px; 
    height:200px; 
    position:relative; 
    overflow:hidden; 
    color:white; 
} 

.inner { 
    width:200px; 
    height:100px; 
    position:absolute; 
    background-color:black; 
    left:200px; 
    color:white; 
} 

SCRIPT

var hidden = true; 

$(document).ready(function(){ 
    $("#btn").click(function() { 
     if(hidden) { 
      $(".inner").stop().animate({left:0}, 1000); 
      hidden = false; 
     } 
     else {   
      $(".inner").stop().animate({left:200},1000); 
      hidden = true; 
     } 
    }); 
}); 

这里是显示这个提琴:http://jsfiddle.net/qGVfp/31/

+0

你好,这是我想要的,但它可以停止并再次点击隐藏:-) – 2013-02-13 04:53:14

+0

我更新的答案确实提供了一个解决方案。 – tjscience 2013-02-13 14:24:13