jQuery slideToggle（从中间点切换）

Posted 2023-02-25

【中文标题】jQuery slideToggle（从中间点切换）

【英文标题】：jQuery slideToggle (Toggle from middle point)

【发布时间】：2018-01-02 13:01:34

【问题描述】：

我正在使用slideToggle(); 方法，它正在工作，我只想从图像的中间点滑入和滑出，而不是向上滑动到左角。 我也不想要 zoomIn 或 zoomOut 事件。

$(document).ready(function() 
  $('.btn').click(function() 
    $('img').stop().slideToggle(5000);
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="btn btn-default">My Button</button>
<br><br><br>
<img class="img-responsive" src="http://news.stanford.edu/news/2012/september/images/online_keyboard_news.jpg">

JSFiddle

【问题讨论】：

***.com/questions/12777861/…

【参考方案1】：

作为使用 jQuery 动画的替代方法，您正在寻找的内容（假设我理解您所解释的内容）可以通过稍微更改您的 DOM 结构并添加几行 css 来完成。

const toggleButton = document.getElementById("toggle-button");
const imageContainer = document.getElementById("image-container");

toggleButton.addEventListener("click", () => 
    imageContainer.classList.toggle("show");
);

button 
    position: relative;
    margin: 20px;


/* Create a wrapper element that matches the image size */
/* and set it to the desired image reveal size */

.wrapper 
    width: 600px;
    height: 400px;
    position: relative;
    margin: 0 auto;


/* Add the image container element and set it to the center of the wrapper */ 
/* set the width and height to 0 so the image isn't visible */

.image 
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    position: absolute;
    background: url(http://news.stanford.edu/news/2012/september/images/online_keyboard_news.jpg)
    no-repeat center center;
    transition-duration: 1000ms;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 1);


/* When we want to show the image animate the width and height */
/* to fit the container as well as adjust the margin to keep it centered */

.image.show 
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: -300px; /* set to half of the containing elements width */
    margin-top: -200px; /* set half of the containing elements height */
    transition-timing-function: cubic-bezier(0, 0, 0.5, 1);

<button id="toggle-button">
  Toggle Image
</button>

<div class="wrapper">
  <div class="image show" id="image-container"></div>
</div>

我创建了一个简单的示例，说明它如何仅使用 javascript 来切换图像元素上的类。

css 中的注释描述了这是如何完成的。

【讨论】：

谢谢@Curt，你的代码结果很好，和我想要的一样，但我使用 html 标签 中的图像而不是 css 作为背景图像。因为我在 html 中使用动态图像。

this 这样的东西怎么样？与原版不完全相同，但很相似……而且我相信只要多花一点时间和精力，就可以实现与原版相同的效果。

再次感谢，还不够！它工作正常，但 切换输入和输出点 不在图像的中间点...现在 切换输入和输出点 是水平居中但不在垂直。再次感谢我也在努力解决它。

你应该可以通过添加几行css使其水平居中...将此属性添加到.wrappermargin: 200px auto;并将此属性添加到.wrapper.showmargin: 0 auto; 应该修理它。这将获得在图像中心启动切换所需的必要大小和间距我更新了我的pen 以反映更改

谢谢@Curt 几乎完成了，只有一件事！自动高度和宽度可以吗？实际上，我想对所有尺寸不具有固定高度和宽度的图像使用 Toggle。 image 和 .wrapper.show 的高度和宽度必须是自动的。

【参考方案2】：

只需用div 包裹img

$(document).ready(function() 
  $('.btn').click(function() 
    $('#image_wrapper').slideToggle('slow');
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btn btn-default">My Button</button>
<br><br><br>
<div id="image_wrapper">
  <img class="img-responsive" src="http://news.stanford.edu/news/2012/september/images/online_keyboard_news.jpg">
</div>

【讨论】：

错误答案！您的代码结果看起来像上下（折叠并向下扩展），但我想在图像的中间点进出扩展。与下一个答案中的 @Curt 相同的结果，但图像必须在 HTML TAG 中，而不是在 CSS 中作为背景图像。