Develop Reference

onClick add/remove class inside loop is not working in jquery

I'm working on flexslider here onClick next I want to add class it is working but randomly click is coming when I first click class added then on second click not coming third click coming so on. I want to add a class every click. Here might be the problem in if()
$('.flex-next').on('click', function() {
if ($('.timeline span').hasClass('clicked')) {
$('.timeline span.clicked').removeClass('clicked');
$(this).addClass('clicked');
} else {
$('.timeline span').removeClass('clicked');
$('.timeline span').addClass('clicked');
}
});
.timeline {
content: '';
background-color: rgba(255, 255, 255, 0.52);
display: block;
width: 100px;
height: 2px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
}
.timeline span:before {
position: absolute;
left: 0;
top: -1px;
content: '';
background-color: red;
display: block;
height: 3px;
animation: yourAnimation 1s 0s linear;
}
.timeline span.clicked {
position: absolute;
left: 0;
top: -1px;
content: '';
background-color: blue;
display: block;
height: 3px;
animation: yourAnimation 1s 0s linear;
}
#keyframes yourAnimation {
0% {
width: 0;
}
50% {
width: 50%;
}
82% {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-next">Click here</div>
<span class="timeline">
<span></span>
</span>

You can acheive the required functionality as
$('.flex-next').on('click', function(){
if (! ($('.timeline span').hasClass('clicked')) ) {
$('.timeline span').addClass('clicked');
setTimeOut(function(){
$('.timeline span').removeClass('clicked');
} , 200)
}
});

To add/remove a class on click, it is better to use jquery toggleClass function.
Moreover you may need to execute the click event after the document is loaded correctly
$( document ).ready(function() {
$('.flex-next').on('click', function(){
$('.timeline span').toggleClass( "clicked" );
});
});
For more info, you may refer to: http://api.jquery.com/toggleclass/

jQuery animation after removing elements

I have the following HTML and CSS:
<div id="categories">
<h3 id="sports">Sports</h3>
<h3 id="videogames">Video Games</h3>
<h3 id="music">Music</h3>
<h3 id="web">Web</h3>
</div>
#categories {
left: 50%;
top: 50%;
position: absolute;
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
#categories > h3 {
display: inline;
}
The h3 elements are displaying inline and centered. I have the following code in jQuery that when you click an h3 element, the other elements fade out. It works well to remove the elements, but once they disappear, the selected element just suddenly flashes into the center (which is where I want it) but is there a way to animate this? Make it a smoother transition?
$("#categories h3").click(function(){
if(this.id == "sports"){
$("#videogames").fadeOut(500);
$("#music").fadeOut(500);
$("#web").fadeOut(500);
}
})

Use transition, much better.
$("#categories h3").click(function(){
if(this.id == "sports"){
$("#videogames, #music, #web").css({opacity: 0});
}
});
#categories {
left: 50%;
top: 50%;
position: absolute;
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
#categories > h3 {
display: inline;
transition: opacity .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="categories">
<h3 id="sports">Sports</h3>
<h3 id="videogames">Video Games</h3>
<h3 id="music">Music</h3>
<h3 id="web">Web</h3>
</div>

May be you can use this. correct me if i am wrongly understood.
if(this.id == "sports"){
$("#videogames").fadeOut(500);
$("#music").fadeOut(500);
$("#web").fadeOut(500);
$("#sports").fadeOut(500);
$("#sports").fadeIn(500);
}

To answer your question about smoothly transitioning the selected element to the center try the below code.
Your fundamental problem is that "The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page." And so the remaining selected element jumps to the center. And you cannot transition to display: none. So you need to find a property you can animate, like "left" which I have used here.
[As an aside there is some extra code there because I was testing the ability to animate flex "order" but it doesn't work at this time on Edge, and untested on other browsers. You do not need the order properties.]
Hope this helps.
$("#categories h3").click( function() {
var thisID = this.id;
$.each( $("#categories h3"), function (index, val) {
if (thisID == val.id) {
var containerWidth = $("#categories").width();
var thisWidth = val.getBoundingClientRect().width;
var thisComputedLeft = val.getBoundingClientRect().left;
var adjustLeft = (containerWidth / 2) - thisComputedLeft - (thisWidth / 2);
// to center the clicked element
$(this).css({ left: adjustLeft });
}
else $(val).css({opacity: 0});
});
});
#categories {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
justify-content: space-around;
align-content: center;
width: 100%;
height: 100%;
//margin: 0 auto;
}
#categories > h3 {
cursor: pointer;
position: relative;
left: 0;
width: auto;
transition: all 0.5s ease, opacity 0.3s;
// transition: opacity 0.3s;
}
#sports { order: 1; }
#videogames { order: 2; }
#music { order: 3; }
#web { order: 4; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="categories">
<h3 id="sports">Sports</h3>
<h3 id="videogames">Video Games</h3>
<h3 id="music">Music</h3>
<h3 id="web">Web</h3>
</div>

Try the following:
$("#categories h3").on('click', function(){
if(this.id == "sports"){
$("#videogames").fadeOut(500, function(){
$("#music").fadeOut(400, function(){
$("#web").fadeOut(300, function(){
$("#sports").fadeIn(400);
});
});
});
}
});
The callback function is called once the first animation is complete. You can nest the functions for a sequence animation.
Update:
Here are better examples for chaining animations: Chaining jQuery animations that affect different elements

jQuery mouseover and mouseout not functioning as desired

Im having an issue where jquery mouseover and mouseout do not work with the css function..
I am trying to have transition effects for buttons on an image slider.
My HTML Code:
<div id="hero">
<div id="next">
<img class="nxt" src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/next.png"/>
</div>
<!--END--Next-->
<div id="prev">
<img class="prv" src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/prev.png"/>
</div>
<!--END--Prev-->
<div id="slider">
<img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide1.png"/>
<img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide2.png"/>
<img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide3.png"/>
</div>
<!--END--Slider-->
</div>
<!--END--Hero-->
My CSS Code:
#hero {
width: 944px; height: 360px;
position: relative;
margin: auto;
}
#slider {
width: 944px; height: 360px;
position: absolute;
overflow: hidden;
}
#next {
position: absolute;
top: 250px;
right: 15px;
z-index: 99;
cursor: pointer;
opacity: 0.3;
}
#prev {
position: absolute;
top: 250px;
left: 15px;
z-index: 99;
cursor: pointer;
opacity: 0.3;
}
and finally my JS Code:
$(function () {
$("#hero").mouseover(function () {
$this = $(this);
$this.find("#next").css(
"transition":"all 0.2s ease-in",
"opacity":"1"
);
}).mouseout(function () {
$this = $(this);
$this.find("#next").css(
"transition":"all 0.2s ease-out",
"opacity":"0.3"
);
});
});
Please bare in mind i am new to javascript and jquery so any help is much appreciated.

Try mouseleave function.
$(function(){
$("#hero").mouseover(function () {
$this = $(this);
$this.find("#next").css({
"transition":"all 0.2s ease-in",
"opacity":"1"
});
}).mouseleave(function () {
$this = $(this);
$this.find("#next").css({
"transition":"all 0.2s ease-out",
"opacity":"0.3"
});
});
});

I've put your code in a Fiddle. This won't work.
Then I cleaned it up a bit and got rid of some syntax errors here and voila: it works.
Note: If you're only going to change the opacity, you better do it with just CSS:
#next{
opacity: 0.3;
transition: all 0.2s;
transition-timing-function: ease-out;
}
#hero:hover #next{
opacity: 1;
transition-timing-function: ease-in;
}
/*DON'T FORGET TO PREFIX THE TRANSITION-ATTRIBUTES*/

How to remove hover state

1) I created an image with an opacity of 1. When you hover over it, the opacity becomes .3 and a button appears over the image. The problem, is that when you hover over the button, the opacity of the image returns to 1. How can I make the opacity of the image stay .3 when the hover is both over the image OR the button?
2) When you click play, the original image changes to a new image. But since the mouse is over the image, the new image has an opacity .3. How can I set the new image to have an opacity of 1 even when its hovered?
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image img:hover {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>

Here's a fiddle
Here's the answer to both of your questions.
Put the hover on the parent:
.show-image:hover img
Add the "hide" class on the parent and change the opacity that way.
$(this).parent().addClass("hide");
div.show-image.hide img{
opacity: 1;
}
To add the play button back on hover after clicking the first time you would have to remove the hide class from the parent in your mouse out function:
$('.the-buttons').parent().removeClass("hide");

change your css
from this:
div.show-image img:hover {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
to this:
div.show-image:hover img {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
Hope this helps. Full snippet:
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image:hover img {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>

I removed your opacity from the CSS, and placed it within your jQuery function. I also replaced your event handler with .hover(), and targeted the parent container.
$('.show-image').hover(
function() {
$(this)
.find('img').css('opacity', '.3').end()
.find('input').show();
}, function() {
$(this)
.find('img').css('opacity', '1').attr("src", originalImgSrc).end()
.find('input').hide();
}
);
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif").css('opacity', 1);
$(this).hide();
});
$('.show-image').hover(
function() {
$(this)
.find('img').css('opacity', '.3').end()
.find('input').show();
},
function() {
$(this)
.find('img').css('opacity', '1').attr("src", originalImgSrc).end()
.find('input').hide();
}
);
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
background: white;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>
Also, note the update I made to restore opacity on clicking 'Play'.

You can use mouseover/mouseout events to add/remove class and add css to that class, I added the .hovered class.
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
function addHOVER() {
$('.show-image img').addClass("hovered");
}
function remHOVER() {
$('.show-image img').removeClass("hovered");
}
$(".show-image img").mouseover(addHOVER);
$(".show-image .the-buttons").mouseover(addHOVER);
$(".show-image .the-buttons").mouseout(remHOVER);
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
remHOVER();
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image img.hovered {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>

JQUERY image overlay fadeIn() fades in and out when mouseover

I am looking to get a nice smooth rollover image to fadeIn over the parent image for a set of buttons.
I have my overlay image stacked ontop of my main image, and it's set to "display: none;".
I have the following jQuery, and it works to FadeIn the overlay image, but it fades it in and out repeatedly when the mouse is over the image. Do I have something wrong in the syntax for my jQuery? Thanks in advance.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".main").mouseenter(function() {
jQuery(".overlay").fadeIn();
});
jQuery(".main").mouseleave(function() {
jQuery(".overlay").fadeOut();
});
});
</script>
and my HTML code:
<style type="text/css">
<!--
.hoverbox { position: relative; }
.main { width: 243px; height: 117px; }
.overlay { position: absolute; width: 243px; height: 117px; top: 0; left: 0; display: none; }
-->
</style>
<!-- button 1 -->
<div class="hoverbox" style="float: left; width: 243px; height: 117px;">
<a href="/locations/sacramento-international-airport/">
<img class="main" src="/images/home-button-smf_orig.jpg" />
<img class="overlay" src="/images/home-button-smf_rollover.jpg" />
</a>
</div>
<!-- end button 1 -->

Try this instead:
<script>
$(document).ready(function() {
$(".hoverbox").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".hoverbox").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
</script>
I think hovering over the image itself was a bad idea, here I use the parent container. Also, using the on() method is now the preferred way to trigger mouse enter and leave events.
Good luck!

Michael's answer is a good one and will work, but it may be preferable to use CSS transitions for the animation and reserve jQuery for the behavior.
Here's a demo.
JavaScript
$(".hoverbox")
.mouseenter(function () {
$(this).addClass("on");
})
.mouseleave(function () {
$(this).removeClass("on");
});
CSS
.overlay {
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
-transition: .4s;
}
.hoverbox.on .overlay {
opacity: 1;
}
Here's a demo of the former approach (similar to Michael's answer). Also, your CSS has been cleaned up for both examples.

css is enough in this case, try the below code
.main:hover + .overlay{ display:block; }
and make sure overlay has a higher z-index
.overlay {
position: absolute; width: 243px; height: 117px;
top: 0; left: 0; display: none; z-index: 2;
}
http://jsfiddle.net/Grhqn/1/
for graceful fading
.overlay {
position: absolute; width: 243px; height: 117px; top: 0;
left: 0; z-index: 2; transition: opacity 1.5s ease; opacity:0;
}
.overlay:hover { opacity:1; }
http://jsfiddle.net/Grhqn/3/