1

我看到了一个小提琴。当光标悬停在它上面时，它会从下到上动画。

我怎么能改变它，以便在点击时，它会从右到左动画，然后，内容会被隐藏？当内容被隐藏时，会有一个按钮，我可以单击该按钮再次显示内容。

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/

4

3 回答 3

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/

于 2013-02-13T04:32:55.210 回答
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/

于 2013-02-13T04:37:28.047 回答
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;
}

脚本

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/

于 2013-02-13T04:37:53.960 回答