首页 > jquery > 点击时,jQuery使div增加200%

点击时,jQuery使div增加200% (jQuery make div 200% bigger on click)

2016-02-11 jquery

问题

我有一个欢迎div,点击链接里面我想扩大一倍。我的问题是,开始时的宽度是持有div的百分比,所以100%,我想让链接上的div点击动画扩展到200%,然后如果点击链接再次动画回来,这里是我有的:

var enlarged = false;

$('.welcome a.expand').click(function(e) {
    e.preventDefault();
    $('.welcome').stop(true, false).animate({
        width: enlarged ? 100 : 200,  // Original width is 100%
        height: enlarged ? 355 : 455, // Original height is 355px
    }, 200);

    enlarged = !enlarged;
});

我知道jQuery正在使用我给出的数字作为px,所以宽度设置中的100和200我需要基于%。

我还有其他段落的文本,我希望在div扩展后显示这样的延迟,然后当然我需要在关闭时首先删除段落并且延迟将div返回到正常的宽度和高度。

任何人都可以指出我正确的方向。

非常感谢

解决方法

这是jQuery的解决方案,它不依赖于硬编码的高度和宽度值:

var enlarged = false;

$('.enlarge').on('click', function() {
  var width = $(this).width();
  var height = $(this).height();
  var $p = $(this).find('p')

  if (!enlarged) {
    width = width * 2;
    height = height * 2;
    enlarged = true;
    var callback = function($this) {
      $this.show();
    };
  } else {
    width = width / 2;
    height = height / 2;
    enlarged = false;
    var callback = function($this) {
      $this.hide();
    };
  }

  $(this).stop().animate({
    width: width,
    height: height
  }, callback($p));

});

我正在添加一个回调函数来animate()显示或隐藏div中的段落。

演示

问题

I have a welcome div that on the click of a link inside I wish to expand by double. The problem I have is that the width at start is in percentage of the holding div so 100%, I want to make the div on link click animate expand to 200%, then if clicked link again animate back, here is what I have:

var enlarged = false;

$('.welcome a.expand').click(function(e) {
    e.preventDefault();
    $('.welcome').stop(true, false).animate({
        width: enlarged ? 100 : 200,  // Original width is 100%
        height: enlarged ? 355 : 455, // Original height is 355px
    }, 200);

    enlarged = !enlarged;
});

I understand that jQuery is using the figures I have given as px based so the 100 and 200 in the width setting I need to be % based.

I also have additional paragraphs of text that i want to show once the div has expanded so a delay in this, then of course I would need to remove the paragraphs first when closing and have a delay on returning the div to normal width and height.

Can anyone point me in the right direction please.

Many thanks

解决方法

Here is a solution for jQuery which is not depending on hard-coded height and width values:

var enlarged = false;

$('.enlarge').on('click', function() {
  var width = $(this).width();
  var height = $(this).height();
  var $p = $(this).find('p')

  if (!enlarged) {
    width = width * 2;
    height = height * 2;
    enlarged = true;
    var callback = function($this) {
      $this.show();
    };
  } else {
    width = width / 2;
    height = height / 2;
    enlarged = false;
    var callback = function($this) {
      $this.hide();
    };
  }

  $(this).stop().animate({
    width: width,
    height: height
  }, callback($p));

});

I'm adding a callback-function to animate() to show or hide the paragraphs inside the div.

Demo

相似信息