div在jquery中沒有動畫。爲什麼？

-1

我創建了一個fiddle。我試圖讓jquery動畫，但是當我點擊鏈接時，它不會移動。爲什麼？我正在使用jQuery轉換插件。div在jquery中沒有動畫。爲什麼？

這裏是我的代碼

HTML

<header class="header"><a href="#" class="click">Click</a></header> 
<section class="contents"> 
    <section class='home'> 
    Hello akdjalskdjalskdjlasklasdjasljdasök 
    </section> 
</section>

CSS

.contents { 
    width: 300px; 
    height: 400px; 
    border: 1px solid red; 
} 
.home { 
    position: absolute; 
    border: 1px solid green; 
}

和js

$('.click').click(function() { 
     $('.home').transition({x: '+100px'}, function() { 
     alert('completed'); 
     }); 
    });

更新

我使用jQuery插件transition

來源

2012-11-01 2619

你想用'x'做什麼動畫？ –

.home容器 – 2619

'x'不是CSS屬性:) –

您需要使用animate和left，而不是transition和x：

$('.click').click(function() { 
    $('.home').animate({left: '+100px'}, function() { 
     alert('completed'); 
    }); 
});

DEMO：http://jsfiddle.net/pesAA/15/

來源

2012-11-01 12:41:26 Eli

海報正在使用插件提供過渡（） – epascarello

如果使用該插件，他的代碼應該工作[http://jsfiddle.net/muthkum/pesAA/14](http://jsfiddle.net/muthkum/pesAA/14），但我的回答也給了他另一種方式，可以實現相同的結果，而無需使用不必要的插件 – Eli

從x考慮要沿水平軸進行動畫製作，然後this should work for you：

$(document).ready(function() { 
    $('.click').click(function() { 
    $('.home').animate({left: '+100px'}, function() { 
     alert('completed'); 
    }); 
    }); 
});

您當前的代碼將無法工作，因爲x是不是在這方面的事情，並transition是不必要的。

您的jsFiddle將無法工作，因爲它沒有引用jQuery，而是引用了Mootools。

來源

2012-11-01 12:43:23

檢查您的jsFiddle庫。 transition框架可能是不必要的，但如果你需要它，你必須確保它包含在jsFiddle中，方法是在「添加資源部分」中添加http://ricostacruz.com/jquery.transit/jquery.transit.min.js。此外，它似乎只適用於早期版本的jQuery，而不是最新版本的v1.8.2。否則你的代碼很好。試試這個demo。

來源

2012-11-01 12:53:56 koostudios

試試這個：

<html> 
<head> 
<style> 
.contents { 
    width: 300px; 
    height: 400px; 
    border: 1px solid red; 
} 
.home { 
    position: absolute; 
    border: 1px solid green; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"  type="text/javascript"></script> 
</head> 
<body> 
<header class="header"><span class="click">Click</span></header> 
<section class="contents"> 
    <section class='home'> 
    Hello akdjalskdjalskdjlasklasdjasljdasök 
    </section> 
</section> 
</body> 
<script> 
$('.click').on('click',function (evt) { 
     $('.home').animate({left: '+100px'}, function() { 
     alert('completed'); 
     }); 
    }); 
</script> 
</html>

問候。

來源

2012-11-01 13:01:45

div在jquery中沒有動畫。爲什麼？

回答

相關問題