JQuery简化常用问题

最新推荐文章于 2024-05-28 22:16:31 发布

nbkangta

最新推荐文章于 2024-05-28 22:16:31 发布

阅读量480

点赞数

分类专栏： JQuery 文章标签： jquery function

本文链接：https://blog.csdn.net/nbkangta/article/details/2570373

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、使用JQuery找出一组radioGroup的选中值，假设这组radio的name属性为radioGroup

$('[name=radioGroup]:checked').val()

2、实现图片等元素的放大，待放大的元素有id为animateMe

$('.animateMe').each(function(){

  $(this).animate(

    {

      width: $(this).width() * 2,

      height: $(this).height() * 2

    },

    2000

  );

});

3、实现元素的下落效果

$('.animateMe').each(function(){

  $(this)

    .css('position','relative')

    .animate(

      {

        opacity: 0,

        top: $(window).height() - $(this).height() -

             $(this).position().top

      },

      'slow',

      function(){ $(this).hide(); });

});

4、点击爆炸消失

$('#puffButton').click(function(){

          $('#testSubject').each(function(){

            var position = $(this).position();

            $(this)

              .css({position:'absolute',top:position.top,

                    left:position.left})

              .animate(

                {

                  opacity: 'hide',

                  width: $(this).width() * 5,

                  height: $(this).height() * 5,

                  top: position.top - ($(this).height() * 5 / 2),

                  left: position.left - ($(this).width() * 5 / 2)

                },

                'normal');

          });

        });

使用$(this).height() *5 /2 是为了保证scale发生的中心是图片中心，去除这两个参数，puff会从最上端和最左端发生。opacity值设置为’hide’，在完成opacity的改变之后元素会自动隐藏。如果改为’0′，虽然可以实现同样效果，但是元素框体依然会留在网页当中。