CODEWITHSUNDEEP
javascriptjquery
Francis Alvin Tan
Francis Alvin Tan

Reputation: 1077

how to slide right to left using div to show content

I saw a fiddle. When cursor is hovering over it, it animates from bottom to top.

How could I change it, so that on click, it would animate from right to left, and after that, the content would be hidden? When the content is hidden, there would be a button, where I could click to have the content show up again.

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);

});
});

and here is the fiddle http://jsfiddle.net/qGVfp/

Upvotes: 1

Views: 3258

Answers (3)

xcopy
xcopy

Reputation: 2288

You are basically there just need to change a few things around.

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;
        }
    });
});

Here is a fiddle to show this: http://jsfiddle.net/qGVfp/31/

Upvotes: 0

Tom Chandler
Tom Chandler

Reputation: 642

There's 2 changes you need to make. First adjust the stylesheet so the moving div is off to the left instead of the bottom:

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

And then change the javascript to react to clicks, be based on width and modify the left property. Note, there is a toggle method that behaves a lot like hover, but it's getting removed from jQuery, so you have to have a boolean that tracks state.

$(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;
    });
});

Here's an updated fiddle: http://jsfiddle.net/qGVfp/30/

Upvotes: 1

allenhwkim
allenhwkim

Reputation: 27738

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

Upvotes: 0

Related Questions