Text animieren nach dem Klick auf img

Question

Ich möchte um ein paar Tipps bitten, wie ich meine Idee verwirklichen kann. Ich wollte Text animieren, nachdem ich auf img geklickt habe. Mit Animation meinte ich so etwas wie Fade oder dieses Zeug.

Die schwarzen wären img und nach dem Klicken auf Bild 1 würde es Spalte mit Text darüber rollen. Dann das gleiche in img 2 und 3 usw.

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

Wer weiß, wie diese Idee zu lösen?

Answer 1

Hier ist eine schnelle Version mit jQuery, lassen Sie mich wissen, wenn Sie eine Vanille-Version benötigen. :)

$('.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

Sie können es auf diese Weise tun:

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