动画图像大小点击与jQuery
Animate an image size on click with jQuery
我试着给一张大图片做动画,让它改变尺寸,从(200x116)px开始,点击后变成(400x232)px,然后如果再次点击,会恢复到(200x116)px,
下面是代码的链接:http://jsfiddle.net/edddotcom/FMfC4/1/
HTML:<img id="imgtab" src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg">
CSS: #imgtab {
position:relative;
}
JavaScript: $(document).ready(function () {
$("#imgtab").toggle(function () { //fired the first time
$("#imgtab").animate({
width: "200px"
height: "116px"
});
}, function () { // fired the second time
$("#imgtab").animate({
width: "400px"
height: "232px"
});
});
});
点击图像应该使它从小到大的动画,但它似乎没有改变。谁能建议我改变什么,告诉我我做错了什么?
如果你只是想切换点击,试试下面
$(document).ready(function () {
var small={width: "200px",height: "116px"};
var large={width: "400px",height: "232px"};
var count=1;
$("#imgtab").css(small).on('click',function () {
$(this).animate((count==1)?large:small);
count = 1-count;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="imgtab" class='small' src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg">
或
还可以使用jQuery-ui widgets库中提供的addClass
和removeClass
函数的duration参数。例如
$(document).ready(function () {
var count=1;
$("#imgtab").on('click', function () {
var $this = $(this);
$this.removeClass('small, large',400);
$this.addClass((count==1)?'large':'small',400);
count = 1-count;
})
});
其中.small
和.large
css类别为:
.small{
width:200px;
height:116px;
}
.large{
width:400px;
height:232px;
}
查看这个工作小提琴
注意:您还需要参考jQuery UI库,因为addClass
和removeClass
的持续时间参数仅在那里可用。
您在animate
方法中作为参数传递的对象属性之间缺少逗号。
$(document).ready(function () {
$("#imgtab").toggle(function () { //fired the first time
$("#imgtab").animate({
width: "200px",//HERE
height: "116px"
});
}, function () { // fired the second time
$("#imgtab").animate({
width: "400px",//HERE
height: "232px"
});
});
});
如:http://jsfiddle.net/dFU9P/
这是一个简单的方法,你可以实现你的动画效果,而不必使用jQuery的动画,而是使用CSS动画。我不知道你需要支持什么浏览器,但看到如何以不同的方式实现它仍然很好。
HTML:<img id="imgtab" src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg">
CSS: img {
height: 200px;
width: 116px;
-webkit-transition: all .4s ease-in; //added vendor prefixes for older browsers
-moz-transition: all .4s ease-in; //first parameter decides what properties to animate
-m-transition: all .4s ease-in; // second is duration
-o-transition: all .4s ease-in; //3rd is the timing-function
transition: all .4s ease-in;
}
.fullSize {
height: 400px;
width: 232px;
}
jQuery: $('#imgtab').on('click', function(e) {
$(this).toggleClass('fullSize');
});
这是小提琴http://jsfiddle.net/AtQwM/。您可以随意使用过渡参数来获得不同的效果!
Toggle
为一个事件提供了两种状态,但是任何使用它的动画都以display:none
结束。因此,您需要使用自己的切换机制,使用一个变量来控制图像的状态:
$(document).ready(function() {
var imgSmall = false
$('#imgtab').on('click',function() {
$("#textab").toggle(20);
if ( imgSmall ) {
$('#imgtab').animate({width:"400px",height:"232px"});
imgSmall = false
} else {
$('#imgtab').animate({width:"200px",height:"116px"});
imgSmall = true
}
});
});
http://jsfiddle.net/FMfC4/3/与其在代码中放置新的图像维度,不如将它们作为数据属性。http://jsfiddle.net/FMfC4/8/
<img class="imgtab" src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg" data-width="400" data-height="200">
(function($) {
$.fn.imageSizer = function() {
var originalSize = {
width: this.width(),
height: this.height()
};
this.on('click', function() {
var newSize = {
width: $(this).data('width'),
height: $(this).data('height')
};
var currentSize = ($(this).width() == newSize.width) ? originalSize : newSize;
$(this).animate(currentSize);
});
}
})(jQuery);
$(document).ready(function() {
$(".imgtab").imageSizer();
});
相关文章:
- jQuery图像幻灯片,在停止后淡出到第一张图像
- 使用next、prev按钮制作简单的jQuery图像滑块
- Jquery图像循环问题
- 为什么这个jQuery图像映射在WordPress上不起作用
- JQuery 图像错误处理
- jQuery 图像替换为类
- jquery 图像旋转器(仅在 JS 中传递图像)
- jQuery图像在悬停时闪烁
- 使用 nameProp 的 JQuery 图像滚动更新在 Firefox 和 Chrome 中不起作用
- JQuery 图像过渡.向上滑动
- jQuery图像淡入淡出不起作用
- JQuery图像预览无法工作
- JQuery图像滑块和CSS转换只能工作一次
- jQuery图像(产品)滑块
- jQuery-图像替换转换〔Safari中的问题〕
- 使jQuery图像滑块停止在最后一个图像,并添加下一个和上一个按钮
- jquery图像滑块库
- JQuery图像大小计算没有'不能在Chrome/Safari中工作
- 如何使JQuery图像滑块与屏幕的宽度相等
- wordpress插件中的jQuery图像幻灯片