slidetoggle in pure Javascript

As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be pletely in pure JavaScript (no jQuery please!). Anyone knows how I can do that.

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 {
	position: relative;
	bottom: 28px;
	text-align: center;
	background-color: grey;
	width: 100%;
	height: 10%;
	font-size: 20px;
	color: white;
	opacity: 0.7;
	display: block;
	visibility: hidden;
}

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

<div class="row">
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
      <img src="" 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="" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
      <img src="" class="project" alt="print-screen"/>
      <div class="text2">BBB</div>
      </a>
    </div>
  </div>
</div>

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 {
	position: relative;
	bottom: 28px;
	text-align: center;
	background-color: grey;
	width: 100%;
	height: 10%;
	font-size: 20px;
	color: white;
	opacity: 0.7;
	display: block;
	visibility: hidden;
}

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

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

Share Improve this question asked Oct 3, 2016 at 12:41 Front-end Developer 4101 gold badge7 silver badges17 bronze badges

This might help: stackoverflow./questions/11213259/javascript-animation – Rajesh Commented Oct 3, 2016 at 12:44
in pure javascript this can only be done with adding a class that will handle the transition with css3 – Panagiotis Vrs Commented Oct 3, 2016 at 12:44
You can do this with CSS only take a look here : jsfiddle/ProLoser/nurx8 – Steeve Pitis Commented Oct 3, 2016 at 12:45
@PanagiotisVrs Then how do they do it in jQuery? That's written in pure js – andrew Commented Oct 3, 2016 at 12:46
Personally, I'll use css positioning to and css transition, just toggle css classes in javascript. – Gabriel Glenn Commented Oct 3, 2016 at 12:46

| Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).

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

Version with JS sizing:

Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.

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

I'll give it to you even better: No javascript at all! This is possible with pure CSS:

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

.text {
	text-align: center;
	background-color: grey;
	width: 100%;
	height: 10%;
	font-size: 20px;
	color: white;
	opacity: 0.7;
	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." target="_blank" class="image">
      <img src="https://i.vimeocdn./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." target="_blank" class="image">
      <img src="https://lh6.ggpht./mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
      <div class="text">BBB</div>
      </a>
    </div>
  </div>
</div>

The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.

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

I usually do this with only CSS. Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.

Example of my code:

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

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

Now all you have to do is swap out the image. onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.

You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class. You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

slidetoggle in pure Javascript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)