jquery - 動畫和圖像上下

我試圖動畫和圖像了，然後用jquery。jquery - 動畫和圖像上下

應該這樣的表現：

頁面加載它顯示的圖像的50％。如果有人點擊圖片，則會將頁面上的div動畫化。如果用戶再次點擊，它會退回頁面。

HTML

<div id="slidebottom" class="slide"> 
    <div class="inner"><img src="images/sze.jpg" alt="" class="try" /></div> 
</div>

jQuery的

$(document).ready(function() { 
    $('.try').click(function() { 
     $(".inner").animate({ 
      top: '-=100px' 
     }, 2000); 
    }); 
});

我需要幫助，如何扭轉動畫點擊後兩位。（目前的每一次點擊，容器向上移動）

謝謝主人

來源

2012-07-18 holian

您可以嘗試使用.toggle()方法，這需要執行他們每個人在點擊之間的兩個功能和候補委員：

$(document).ready(function(){ 
    $('.try').toggle(function() { 
    $(".inner").animate({top: '-=100px'}, 2000); 
    }, function() { 
    $(".inner").animate({top: '+=100px'}, 2000); 
    }); 
});

但是，我個人會使用一個類和CSS3轉換。

來源

2012-07-18 08:31:20 Inkbug

有可能無法在Chrome工作動畫動畫呢？ FF工作這個，但在Chrome後點擊圖像第一個圖像跳下來，並動畫，如果我再次點擊比動畫的洞網站.. crazy效果 – holian 2012-07-18 08:57:15

我試過Chrome，IE9，Safari ...只有FF處理它正如所料。 – holian 2012-07-18 09:01:31

我想我用css做這個 – holian 2012-07-18 09:02:03

嘗試this example。另請注意，爲了使用top css屬性，您應該使用position: relatve;或position: absolute.inner div。

var clicked = false 
$('.try').click(function() { 
    if (clicked == true) { 
     $(".inner").animate({ 
      top: '0px' 
     }, 2000); 
     clicked = false; 
    } else { 
     $(".inner").animate({ 
      top: '-100px' 
     }, 2000); 
     clicked = true; 
    } 
});

來源

2012-07-18 08:37:11 menislici

90％的例子不適合我，但是這樣做... – cptstarling 2015-09-02 16:50:02

舊圖像鏈接已經死了，[這是一個固定版本]（http://jsfiddle.net/jGfHM/339 /） – 2017-03-03 06:49:03

只需把另一個代碼行的第一下，它會爲了

$(document).ready(function() { 
    $('.try').click(function() { 
     $(".inner").animate({ 
      top: '-=100px' 
     }, 2000); 
     $(".inner").animate({ 
      top: '+=100px' 
     }, 2000); 
    }); 
});

來源

2017-08-07 17:41:04 BanjoMike

jquery - 動畫和圖像上下

回答

相關問題