기능이 한 번만 발생합니다.

Question

지도를 확대하거나 축소하려고 할 때 클릭하려고합니다. 그러나 첫 번째 클릭 후지도가 다시 확대되지 않습니다. 지금 jquery animate를 사용하고 있지만 더 나은 솔루션이 있다면 그 사실을 알고 싶습니다.

var mapWidth = $('.vector-map img').width(); 

    $('.zoom-in').on('click', function() { 
    $('.vector-map img').animate({width: mapWidth + 50}, 'slow'); 
    }); 

    $('.zoom-out').on('click', function() { 
    $('.vector-map img').animate({width: mapWidth - 50}, 'slow'); 
    }); 

Answer 1

당신은 초기 설정에서지도 폭을 받고, 당신이 확대되기 전에 때마다 시도하지 :

var mapWidth = $('.vector-map img').width(); 

    $('.zoom-in').on('click', function() { 
    mapWidth = $('.vector-map img').width(); 
    $('.vector-map img').animate({width: mapWidth + 50}, 'slow'); 
    }); 

    $('.zoom-out').on('click', function() { 
    mapWidth = $('.vector-map img').width(); 
    $('.vector-map img').animate({width: mapWidth - 50}, 'slow'); 
    });