slidetoggle in pure Javascript

Question

Как вы могли видеть, я установил текстовое поле, которое появится, когда кто-то нависает над этим изображением, но, честно говоря, я хочу, чтобы эффект слайда медленно поднимался. Должен быть полностью в чистом JavaScript (без jQuery!). Кто-нибудь знает, как я могу это сделать.

function show(myText) { 
 
    var elements = document.getElementsByClassName(myText) 
 
    
 
    for(var i = 0; i < elements.length; i++){ 
 
     elements[i].style.visibility = "visible"; 
 
    } 
 
} 
 

 
function hide(myText) { 
 
    var elements = document.getElementsByClassName(myText) 
 
    
 
    for(var i = 0; i < elements.length; i++){ 
 
     elements[i].style.visibility = "hidden"; 
 
    } 
 
}

.text1 { 
 
\t position: relative; 
 
\t bottom: 28px; 
 
\t text-align: center; 
 
\t background-color: grey; 
 
\t width: 100%; 
 
\t height: 10%; 
 
\t font-size: 20px; 
 
\t color: white; 
 
\t opacity: 0.7; 
 
\t display: block; 
 
\t visibility: hidden; 
 
} 
 

 
.text2 { 
 
\t position: relative; 
 
\t bottom: 28px; 
 
\t text-align: center; 
 
\t background-color: grey; 
 
\t width: 100%; 
 
\t height: 10%; 
 
\t font-size: 20px; 
 
\t color: white; 
 
\t opacity: 0.7; 
 
\t display: block; 
 
\t visibility: hidden; 
 
}

<div class="row"> 
 
    <div class="col-md-6 col-sm-12"> 
 
    <div class="tumb-wrapper"> 
 
     <a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')"> 
 
     <img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/> 
 
     <div class="text1">AAA</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-12"> 
 
    <div class="tumb-wrapper"> 
 
     <a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')"> 
 
     <img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/> 
 
     <div class="text2">BBB</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Вот его версия, полная javascript, просто используя CSS. Я скоро отредактирую это с небольшим добавлением javascript (эта текущая версия требует, чтобы у вас был фиксированный размер).

.caption { 
 
    height: 250px; 
 
    width: 355px; 
 
    overflow: hidden; 
 
} 
 
.caption-image { 
 
    height: 100%; 
 
} 
 
.caption-text { 
 
    color: white; 
 
    padding: 10px; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    transition: transform 400ms ease; 
 
} 
 
.caption-image:hover + .caption-text, 
 
.caption-text:hover { 
 
    transform: translateY(-100%); 
 
}

<div class="caption"> 
 
    <img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" /> 
 
    <div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div> 
 
</div> 
 

 
<div class="caption"> 
 
    <img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" /> 
 
    <div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div> 
 
</div>

Версия с JS проклейки:

В основном та же идея, но когда страница загружается она устанавливает определенные стили так изображения могут быть какие-либо размер вы хотите.

var captionSel = document.querySelectorAll('.caption'); 
 

 
for (let i = 0; i < captionSel.length; i++) { 
 
    let image = captionSel[i].querySelector(":scope > .caption-image"); 
 
    let text = captionSel[i].querySelector(":scope > .caption-text"); 
 
    text.style.width = image.clientWidth - 20 + "px"; 
 
    captionSel[i].style.height = image.clientHeight + "px"; 
 
}

.caption { 
 
    overflow: hidden; 
 
} 
 
.caption-text { 
 
    color: white; 
 
    padding: 10px; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    transition: transform 400ms ease; 
 
} 
 
.caption-image:hover + .caption-text, 
 
.caption-text:hover { 
 
    transform: translateY(-100%); 
 
}

<div class="caption"> 
 
    <img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" /> 
 
    <div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div> 
 
</div> 
 

 
<div class="caption"> 
 
    <img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" /> 
 
    <div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div> 
 
</div>

Answer 2

Я дам его вам еще лучше: Нет JavaScript на всех! Это возможно с чистым CSS:

.tumb-wrapper { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.text { 
 
\t text-align: center; 
 
\t background-color: grey; 
 
\t width: 100%; 
 
\t height: 10%; 
 
\t font-size: 20px; 
 
\t color: white; 
 
\t opacity: 0.7; 
 
\t display: block; 
 
    position: absolute; 
 
    bottom: -30px; 
 
    transition: 300ms; 
 
    left: 0; 
 
} 
 

 
.tumb-wrapper:hover .text { 
 
    bottom: 28px; 
 
}

<div class="row"> 
 
    <div class="col-md-6 col-sm-12"> 
 
    <div class="tumb-wrapper"> 
 
     <a href="http://www.bbc.com" target="_blank" class="image"> 
 
     <img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/> 
 
     <div class="text">AAA</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-12"> 
 
    <div class="tumb-wrapper"> 
 
     <a href="http://www.cnn.com" target="_blank" class="image"> 
 
     <img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/> 
 
     <div class="text">BBB</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

transition CSS свойство одухотворяет любые изменения, внесенные. Таким образом, когда вы наводите верх над div .tumb-wrapper, div .text будет выдвигаться вверх.

You should note however, that ancient IE versions won't be able to use this

Answer 3

Я обычно делаю это только с помощью CSS. Просто сохраните первое и второе изображения прямо рядом друг с другом в одном файле ... затем вы используете css для изменения положения фонового изображения. Чтобы сделать что-то приятнее, я добавляю css-анимацию в движение фонового изображения.

Пример моего кода:

<div id="thumb_Wrapper">  
    <div class="_Thumb"> 
    <img src="images/Thumb.jpg" class="Animate_left"> 
    </div> 
</div> 

CSS-

#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;} 
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;} 
    ._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;} 
    ._Thumb > img:hover{left:-18px; cursor:pointer;} 

CSS Animation

.Animate_left{transition:left .3s;} 

Теперь все, что вам нужно сделать, это поменять изображения. onHover - изображение в миниатюре будет плавно скользить влево; показывая остальную часть изображения/показывая другое изображение.

Вы можете установить, как далеко влево (или вправо) вы хотите, чтобы изображение большого пальца сначала появилось, отрегулировав значение «left» в классе ._Thumb. Вы можете установить, насколько изображение скользит при наведении, отрегулировав img: hover {left: -18px} на то, что вам нравится; вместо 18px.