CODEWITHSUNDEEP
jquery
user1302513
user1302513

Reputation: 13

Add more effect on div using jQuery

Hello friends i want to add more effects on my div when i click on the <li> my code is working perfect here but i want to add effect like fadeIn() fadeOut() and slideup() and slideDown()

Thanks in advance

Upvotes: 1

Views: 264

Answers (3)

Priyank Patel
Priyank Patel

Reputation: 6996

You could also use ,

$('#lione').click(function () {
    var p = $('#one').html();
    $('#fade').stop().slideUp(1000).slideDown(1000).html(p);
})

$('#litwo').click(function () {
    var p = $('#two').html();
    $('#fade').slideUp(1000).slideDown(1000).html(p);
    $('#fade').html(p);
})

Upvotes: 0

Code Maverick
Code Maverick

Reputation: 20415

You could do something like this:

HTML:

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<div id="selected">cvb</div>

CSS:

div#selected {
    float:left;
    width:90%;
    border:solid;
    padding:10px;
    font-size:2em;
}

ul {
    margin:0;
    padding:0;
}

ul li {
    margin:2px 0;
    padding:10px;
    background:#999999;
    color:#fff;
    font-size:15px;
    width:90%;
    list-style:none;
    cursor:pointer;
}

ul li:hover {
    background:#CCCCCC;
    color:black;
}​

jQuery: 

$(function() {

    var $selected = $("#selected");
    $("ul li").click(function() {

        var $li = $(this);
        $selected
            .stop(true,true)
            .fadeOut(0)
            .html($li.html())
            .fadeIn(2000);

    });

});
​

Upvotes: 1

funerr
funerr

Reputation: 8156

You can add the functions as such:

$('#fade').fadeOut().fadeIn().html(p);

Every "effect" will be active after the other one has "acted".
To ensure that there wont be a mass loop of effects, I recommend using the .stop() function.

as so:(to see the difference, click many times on the li and try the code with and without the .stop() function).

$('#fade').stop().fadeOut().fadeIn().html(p);

Upvotes: 2

Related Questions