Question

我想问一些如何让我的想法成真的提示。我想点击img后动画文字。通过动画我的意思是淡入或这些东西。

黑色的那些将是img，在点击图像1后，它将向下滚动列，其中包含文本。然后在img 2和3等中也是如此。

＆＃13;

.top {
  display: inline-block;
  background: black;
  width: 100px;
}
.text{
  display: inline-block;
  width: 100px;
  height: 200px;
  background: yellow;
}

＆＃13;

  <div class="top">a</div>
  <div class="top">b</div>
  <div class="top">c</div>
  <br>
  <div class="text">Test1</div>
  <div class="text">Test2</div>
  <div class="text">Test3</div>

＆＃13;

有谁知道如何解决这个想法？

Answer 1

这是一个使用jQuery的快速版本，如果你需要一个vanilla版本，请告诉我。：）

＆＃13;

$('.hook').on('click', function( evt ) {
	$(evt.currentTarget).find('.text').slideToggle();
});

＆＃13;

.hook{
  display: inline-block;
  vertical-align: top;
}

.image {
  width: 100px;
  height: 100px;
  background: black;
}

.text {
  width: 100px;
  height: 200px;
  background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="hook">
  <div class="image">a</div>
  <div class="text" style="display: none;">Test1</div>
</div>
<div class="hook">
  <div class="image">a</div>
  <div class="text" style="display: none;">Test2</div>
</div>
<div class="hook">
  <div class="image">a</div>
  <div class="text" style="display: none;">Test3</div>
</div>

＆＃13;

Answer 2

你可以这样做：

＆＃13;

// Declare your elements
var top_divs = document.querySelectorAll('.top'),
  text_divs = document.querySelectorAll('.text');

// For each ".top"
for (var i = 0; i < top_divs.length; i++) {
  (function(index) {
    // When you click on it
    top_divs[index].addEventListener('click', function() {
      // Toggle the ".shown" class on the corresponding ".text"
      toggleClass(text_divs[index], 'shown');
    });
  })(i);
}

// Code from http://youmightnotneedjquery.com/
function toggleClass(el, cl) {
  if (el.className.split(' ').indexOf(cl) > -1) {
    el.className = el.className.replace(new RegExp('(^|\\b)' + cl.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  } else {
    el.className += ' ' + cl;
  }
}

＆＃13;

.top {
  display: inline-block;
  background: black;
  width: 100px;
}
.text {
  display: inline-block;
  width: 100px;
  height: 200px;
  background: yellow;
  /* Makes them transparent by default */
  opacity: 0;
  /* Make their opacity animate when it changes */
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

/* Show them when they have the class */
.text.shown {
  opacity: 1;
}

＆＃13;

<p>Click on one of these:</p>
<div class="top">a</div>
<div class="top">b</div>
<div class="top">c</div>
<br>
<div class="text">Test1</div>
<div class="text">Test2</div>
<div class="text">Test3</div>

＆＃13;

Answer 3

jQuery('div.top').each(function(index, img){
  jQuery(img).click(slide.bind({index: index}));
});


function slide() {
  jQuery('div.text:eq('+ this.index +')').slideToggle();
}

.item{
  width: 100px;
  display: inline-block;
  vertical-align: top;
}

.top {
  background: black;
  width: 100%;
}
.text{
  width: 100%;
  height: 200px;
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item">
  <div class="top">a</div>
 <div class="text">Test1</div>
  </div>
<div class="item">
   <div class="top">b</div>
  <div class="text">Test2</div>
 </div>
<div class="item">
   <div class="top">c</div>
 <div class="text">Test3</div>
</div>

单击img后动画文本

3 个答案: