Question

创建缩略图滑块时遇到此问题。我有2个元素 - <ul>，其中B类嵌套在<div> A。

中

我希望能够移动<ul＆gt;使用一些jQuery函数（如animate()）向右和向左移动B.问题是它似乎根本不起作用。元素<ul> B不能简单地移动。

也许我做错了什么或者我只是不明白它是如何运作的。请帮帮我。

以下是我的CODEPEN链接：https://codepen.io/anon/pen/wqGVaN

<div class="a">
    <ul class="b">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
    </ul>
</div>
<br/>
<button>Animate</button>

<script>
$(button).click(function(){
  $(".b").animate({letf: "130px"});  
  //DIV class="b" CAN NOT BE MOVED through DIV class="a"
});
</script>

CSS：

.a {
  width: 500px;
  height: 25px;
  display: block;
  background: red;
  border: 3px red solid;
  overflow: hidden;
}

.b {
  list-style-position: inside;
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
}

.b > li {
  display: inline-block;
  padding: 0;
  width: 45px;
  background: yellow;
  text-align: center;
}

Answer 1

您可以使用解决方案https://jsfiddle.net/vwvn7uvn/1/

＆＃13;

$('button').click(function(){
	$(".b").animate({left: "130px"});  
});

＆＃13;

.a {
  width: 500px;
  height: 25px;
  display: block;
  background: red;
  border: 3px red solid;
  overflow: hidden;
}

.b {
  list-style-position: inside;
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  position: relative;
}

.b > li {
  display: inline-block;
  padding: 0;
  width: 45px;
  background: yellow;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
    <ul class="b">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
    </ul>
</div>
<br/>
<button>Animate</button>

＆＃13;

我对代码做了两处更改。

<强> JS

拼写错误 letf 更改为左

CSS （已添加）

.B { 位置：相对; }

Answer 2

首先，您的JQuery无效。当@ j08691退出时，.animate({letf: "130px"})有一个错字。

不仅如此，按钮JQuery选择器也无效。尝试添加ID，因为JQuery查询DOM的速度更快。

您还应该利用原生CSS转换，这也更快。下面的代码段：

＆＃13;

$('#myButton').click(function(){
    $(".b").toggleClass('animated');  
});

＆＃13;

.a {
  width: 500px;
  height: 25px;
  display: block;
  background: red;
  border: 3px red solid;
  overflow: hidden;
  position: relative;
}

.b {
  list-style-position: inside;
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  position: absolute;
  top: 0; left: 0;
  transition: left .2s ease; 
}

.b.animated {
  left: -130px;
}

.b > li {
  display: inline-block;
  padding: 0;
  width: 45px;
  background: yellow;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
    <ul class="b">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
    </ul>
</div>
<br/>
<button id="myButton">Animate</button>

＆＃13;

jQuery animate（）函数不能移动一组嵌套元素？

2 个答案: