jQuery動畫 - 使圖像從左至右可見

我想隱藏使用jQuery隱藏的圖像。我正在使用.hide()函數。我將它應用於包含必須隱藏的圖像的div。由於某種原因，它不工作。我有created a fiddle。jQuery動畫 - 使圖像從左至右可見

是否可以使用animate以便圖像在1秒內從右向左變爲可見。換句話說，動畫的寬度從0到最大值，但圖像應該從左到右可見。

2012-04-02 Bobby Francis Joseph

你沒有使用正確的syntax.missing）;在每個函數結束時

$(document).ready(function() { 
    $('#animate').click(function() { 
     $('#myimage').animate({width: 'hide'},1000); 
    }); 
});

來源

2012-04-02 08:08:22

http://jsfiddle.net/bobbyfrancisjoseph/rAqcP/34/ 請看這個小提琴。我希望動畫從右到左發生。 – 2012-04-02 08:15:52

你可以找到工作jsFiddle here。

幾點：

在原來的小提琴，你忘了使用終止) - 這就是爲什麼躲在沒有工作。
爲了完成動畫，我使用了jQuery easing的blind。要使用這個（和其他緩動），你需要引用jQuery UI庫（正如我在小提琴中所做的那樣）。我花了一段時間才能找出爲什麼效果不工作，直到我打勾是左側:)

爲了記錄小複選框，我也是從小提琴張貼代碼：

$(document).ready(function() { 
    $('#animate').click(function() { 
     $('#myimage').toggle('blind', { direction: 'horizontal' }, 1000); 
    }); 
});

來源

2012-04-02 08:02:09

您能告訴我如何隱藏頁面加載的圖像，然後在按鈕按下時從左向右進行動畫處理。這是我的確切要求。 – 2012-04-02 08:10:30

http：// jsfiddle。net/bobbyfrancisjoseph/rAqcP/34/ 請看這個小提琴。我想要從右向左發生混響。 – 2012-04-02 08:16:22

這裏是你想要的東西：

http://jsfiddle.net/rAqcP/27/

請更改動畫，因爲你需要。

〜ķ

來源

2012-04-02 08:03:53

你能告訴我如何隱藏頁面加載的圖像，然後在按下按鈕時從左到右進行動畫處理。這是我的確切要求。我需要動畫是可見性而不是x位置 - – 2012-04-02 08:12:23

http://jsfiddle.net/bobbyfrancisjoseph/rAqcP/34/ 請看這個小提琴。我想要從右向左發生混響。 – 2012-04-02 08:16:10

我不認爲你應該動畫的寬度，因爲在調整大小時圖像會顯得怪異。

你可以達到你想要這樣的東西：

置容器中（該DIV＃MYIMAGE）至overflow: hidden和position: relative：隱藏溢出將允許圖像移動到左邊從容器中
圖像設置爲position: absolute和圖像移動到左邊隱藏它
動畫left財產回零

DEMO

DEMO (initial state with css)

來源

2012-04-02 08:04:44

你能告訴我如何隱藏頁面加載的圖像，然後在按下按鈕時從左到右進行動畫處理。這是我的確切要求。我需要動畫的是可視性，而不是x位置 – 2012-04-02 08:12:04

我改變了小提琴。只需在domready而不是click事件中設置圖像的'left'屬性即可。如果知道圖像的大小，您也可以直接在CSS中設置它（而不是通過javascript）。 – 2012-04-02 08:13:31

http://jsfiddle.net/bobbyfrancisjoseph/rAqcP/34/ 請看這個小提琴。我想要從右向左發生混響。 – 2012-04-02 08:16:05

jQuery動畫 - 使圖像從左至右可見

回答

相關問題