CODEWITHSUNDEEP
jquerycsstoggleslide
Christian Bangert
Christian Bangert

Reputation: 720

Delay CSS Loading With Jquery

I have two questions.

My main question would be how to delay the load time of my CSS property using Jquery? I tried using .delay().css(), but no luck. I want the rounded corners to load after the slide animation has finished.

My second question is why isn't my down arrow changing when it's being toggled?

$(document).ready(function () {

    $(function () {
        $('.click_here').click()
    })

    // Attach toggle event to click areas
    $('.click_here').toggle(

    function () {
        $(this).siblings().slideUp('fast')
        $(this).css("border-radius", "10px")
    },

    function () {
        $(this).siblings().slideDown('fast')
        $(this).delay(800).css("border-radius", "10px 10px 0px 0px")
        $('.click_here:before').css("content", "\21e1")

    })


})

http://jsfiddle.net/Yzbp9/12/

Upvotes: 2

Views: 118

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

Then its time to use the callBack function of slideUp/slideDown,

$('.click_here').toggle(function () {
        var $this = $(this);
        $(this).siblings().slideUp('fast', function () {
            $this.css("border-radius", "10px")
        });
    },function () {
        var $this = $(this);
        $(this).siblings().slideDown('fast', function () {
            $this.delay(800).css("border-radius", "10px 10px 0px 0px")
        });
   $('.click_here:before').css("content", "\21e1")
})

DEMO

Upvotes: 3

Related Questions