JQuery .toggle('slide') not sliding it looks more like .show() or .hide()

Question

I am trying to make a button that when clicked displays an animation were two triangles slide in, but when I try to use the .toggle('slide') command it does something that resembles .show() or .hide(), also it takes 2 clicks to do everything and I want it to work in 1. I put my JQuery below but my full code is in this CodePen or this JSfiddle I recommend looking at the CodePen one because the JSfiddle is having problems for me.

$(document).ready(function(){
  $('#buttondiv').click(function(){
    $('#triangle').toggle('slide', 'slow');
    $('#triangle2').toggle('slide', 'slow');
  })
});

@ArunPJohny it doesn't look any different. – Joshua May 04 '15 at 01:14 — Joshua, May 04 '15 at 01:14
https://jsfiddle.net/arunpjohny/dyqr3tbg/3/ – Arun P Johny May 04 '15 at 01:18 — Arun P Johny, May 04 '15 at 01:18
How about `slideToggle('slow')`? – Stickers May 04 '15 at 01:44 — Stickers, May 04 '15 at 01:44

score 1 · Accepted Answer · answered May 04 '15 at 01:40

Please try this my code:

$(document).ready(function(){
  $('#buttondiv').click(function(){
    $('#triangle').animate({"margin-left": "0px"}).show();
    $('#triangle2').animate({"margin-left": "0px"}).show();
  });
});

/*body {
  background-color:gray;
}*/

#buttondiv {
  background: blue;
  text-align:center;
  padding:0px;
  color:white;
  width:200px;
  height:70px;
  font-size:25px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-45px;
  margin-left:-100px;
  border:none;
  font-family: 'Lobster', cursive;
}

#triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 0 35px 50px;
  border-color: transparent transparent transparent white;
  position:absolute;
  display:none;
  margin-left:-100px;
}

h1 {
  color:white;
  position:relative;
  text-align:center;
  bottom:28px;
  text-shadow:0px 0px 5px red;
}

#triangle2 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 0 35px 50px;
  border-color: transparent transparent transparent blue;
  position:absolute;
  left:200px;
  display:none;
  margin-left:-100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#'>
  <div id='buttondiv'>
  <div id='triangle2'></div>
  <div id='triangle'></div>
  <h1>Click</h1>
  </div>
</a>

score 0 · Answer 2 · answered May 04 '15 at 01:24

0

I find that way .. may it help .. you can try using opacity in css and animate() in jquery

$(document).ready(function(){
  $('#buttondiv').click(function(){
   if($(this).find('#triangle').css('opacity') == 0)  {
      $('#triangle,#triangle2').animate({'opacity': 1},1000);
   }else{
        $('#triangle,#triangle2').animate({'opacity': 0},1000);
   }
  });
});

JSFIDDLE

answered May 04 '15 at 01:24

Mohamed-Yousef

23,946
3
19
28

I want to it look like it is sliding though not fading – Joshua May 04 '15 at 01:39

score -1 · Answer 3 · answered May 04 '15 at 01:12

-1

the jquery function toggle does not have a 'slide' parameter, see here in the docs, so instead of :

$('#triangle').toggle('slide', 'slow');

try just:

$('#triangle').toggle('slow');

answered May 04 '15 at 01:12

Ruggi

105
5

I have tried that, then it just makes it look like a .fadeIn() or .fadeOut() effect instead of sliding. – Joshua May 04 '15 at 01:15
have you ever try with animate? – Wahyu Kodar May 04 '15 at 01:20
@Joshua, I don't think that the kind of animation that you are looking for for your button, matches with the animation that you can do with .toggle()... – Ruggi May 04 '15 at 01:21
I found that: [http://stackoverflow.com/questions/14470081/jquery-slidetoggle-horizontal-alternative], see if it helps: – Ruggi May 04 '15 at 01:24
I tried it on my code but it still is looking like .show() – Joshua May 04 '15 at 01:38

JQuery .toggle('slide') not sliding it looks more like .show() or .hide()

3 Answers3