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 に答える