CODEWITHSUNDEEP
javascriptjquerycss
Imbue
Imbue

Reputation: 429

Animating height on live updating content / jquery

I have this problem with animating a new height on a div box containing an image. I have a live updating content function that is extracted from a database.

function update_content() { 
var idval = getUrlVar("id");
$.getJSON("getdata.php", { id: idval }, function(data) {
    $("div#results").empty();
    $.each(data.json, function() {
        sum = this['sum'];
        $("div#results").append("<h2>"+this['title']+"</h2><div class='workimg' style='background:url(img/work/"+this['billede']+");background-position: center center;'></div><a id='expand'>klik</a>");
    });
});
        setTimeout(function(){
        update_content();
    }, 1000);
}

This works fine, and i gave the div (.workimg) an height of 200px. Then i made a click function (#expand), that would animate the div to be 500px instead of 200px, and this works fine aswell, but the problem is, that the above function is live updating every second, so when i click, and it animates to 500 pixels, 1 second after, its back to 200px again, without any user interaction.

Click handle:

$(document).on('click', "#expand", function() {
            $(".workimg").animate({
        height: '500px'
    }, 1000);
});

Is there any workaround for this problem?

Best regards

Upvotes: 0

Views: 64

Answers (1)

durgesh.patle
durgesh.patle

Reputation: 720

have you written code for giving height of 200px inside update_content() ?, I think it's because you are recursively calling update_content() after each 1 second. Now you can make change in your click function like this.

 $(document).on('click', "#expand", function() {
        $(".workimg").animate({
    height: '500px'
}, 1000);
 setTimeout(function(){ $(".workimg").css('height','500px !important'); },1100);

});

Upvotes: 1

Related Questions