Question

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

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

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/

Answer 1

您需要进行2项更改。首先调整样式表，使移动div偏离左侧而不是底部：

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

然后更改javascript以对点击作出反应，基于宽度并修改left属性。注意，有一个切换方法，其行为很像悬停，但它已从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/

Answer 2

.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/

Answer 3

你基本上只需改变一些事情。

<强> 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/

如何使用div来显示内容从右向左滑动

3 个答案: