jQuery bind to toggle opacity on elements

Question

I have the following JS which uses fadeToggle() which works fine however it does a display:none so the 3rd element which I always display jumps up so wondering if its possible to change to change the opacity to 0 so in theory the block is still there and nothing moves.

JS

$('.ty-banner__image-item.gt-banner').bind('touchstart touchend', function(e) {
    $(this).find('div.image .banner-overlay').fadeToggle('fade');
    $(this).find('.content h2, .content p:first-child, .content p:eq(1)').fadeToggle();
});

Can I toggle to set opacity to 0 on a toggle?

updated to use toggle class to add class fade which just changes opacity: 0 but need to fade it some how.

// mobile touch rubbish
    $('.ty-banner__image-item.gt-banner').bind('touchstart touchend', function(e) {
        $(this).find('div.image .banner-overlay').toggleClass('fade');
        $(this).find('.content h2, .content p:not(".button")').toggleClass('fade');
    });

Mi-Creativity · Accepted Answer · 2016-01-22T01:59:34.120

0

You're right it sets display:none and the element space vanishes making the element after it takes its place, instead you need to use opacity with animate() function, just like this:

JS Fiddle 1

var toggleFlag = true;

$('#btn').on('click', function() {
  
  // if the toggle flag is true, we set the opacity to 0, 
  // else we set it to 1, and animate the opacity property
  var op = (toggleFlag) ? 0 : 1;
  $('#second-div').stop().animate({'opacity': op}, 500);
  
  // finally we switch the toggle flag value to keep in control  
  toggleFlag = !toggleFlag;
});

.divs {
  display: block;
  width: 150px;
  height: 100px;
  margin-bottom: 5px;
  background-color: orange;
}
#second-div {
  background-color: tomato;
}
#third-div {
  background-color: skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="first-div" class="divs"></div>
<div id="second-div" class="divs"></div>
<div id="third-div" class="divs"></div>
<button id="btn">animate</button>

Alternatively you can use .css() function with CSS transition like this:

JS Fiddle 2

var toggleFlag = true;

$('#btn').on('click', function() {
  var op = (toggleFlag) ? 0 : 1;
  $('#second-div').css({'opacity': op, 'transition': 'opacity 0.5s'});
  toggleFlag = !toggleFlag;
});

UPDATE:

You need to bind it on either touchstart or touchend but not both because it'll response to both events and toggle its opacity too fast that the fade effect won't be noticeable.

JS Fiddle 3

edited Jan 22 '16 at 01:59

answered Jan 22 '16 at 01:24

Mi-Creativity

9,554
10
38
47

I have recoded it so it uses for mobile toggleClass which sets a class to change the opacity which works great and position stays but its just instant so need to fade that transition. ill have a look at your example above though as see if can adapt to animate it :) – James Jan 22 '16 at 01:30
its not onclick btw, the effect only happens on mobile devices when touchstart touchend.. – James Jan 22 '16 at 01:31
ill update question now with what i have done... it just toggles class to add fade which does opaicty: 0 and back to opacity: 1 – James Jan 22 '16 at 01:32
I know it is not on `click` this is just a deomsntration – Mi-Creativity Jan 22 '16 at 01:32
with `toggleClass()` you wil lhave animation either on fade in or fade outyou need to use two CSS class and depending on the toggle flag value you remove the other and add the corresponding class – Mi-Creativity Jan 22 '16 at 01:37
I think so, also use `on('tap')` too, give it a try – Mi-Creativity Jan 22 '16 at 01:38
Yep i know i can add CSS to animate within the CSS and use: transition: opacity .25s ease-in-out; but thought maybe a way in JS but think i might do like that lol – James Jan 22 '16 at 01:39
Would use tap but tap needs to action the click event as its a banner but know what you mean :) – James Jan 22 '16 at 01:40
check this out http://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both – Mi-Creativity Jan 22 '16 at 01:43
I've just made this https://jsfiddle.net/Mi_Creativity/nxa0p0Lo/7/ and checked it with the devTool Device Emulator and it works fine, you need to either bind it to `touchstart` or `touchend` but *not both* – Mi-Creativity Jan 22 '16 at 01:52
thanks mate for your help, i got it cracked but checked your example and although different yours done the trick as well so will mark as valid answer :) – James Jan 22 '16 at 01:59
always enjoy, shame live and breath it haha all week been starting 12pm and finished 9am (clients in australia heh, oh the joys lol) – James Jan 22 '16 at 02:07

score 0 · Answer 2 · answered Jan 22 '16 at 01:30

AFAIK, this is the behaviour of fadeToggle and you can't do much about it, but you can use an alternative method such as fadeTo which better fits your needs.

fadeTo only changes the opacity of an element, while the toggling part is something that you'll have to implement by yourself, but it shouldn't be complicated.

jQuery bind to toggle opacity on elements

2 Answers2