點擊圖片後的動畫文本

Question

我想問一些提示如何讓我的想法成真。 我想在點擊img之後爲文字添加動畫。通過動畫我的意思是像淡入淡出或這東西。

黑色的將是img，點擊圖片1後，它會在文本框中滾動。然後，在圖2和3等

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

<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>

相同有誰知道如何解決這個想法？

Answer 1

這是jQuery的快速版本，讓我知道如果你需要一個香草版本。 :)

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

.hook{ 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.image { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
} 
 

 
.text { 
 
    width: 100px; 
 
    height: 200px; 
 
    background: yellow; 
 
}

<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>

Answer 2

你可以這樣來做：

// 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; 
 
    } 
 
}

.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; 
 
}

<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>

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>