This is my first question here, feel free to tell me if I am not specific enough or whatever I do wrong!
I want a jquery method which change all divs with the class "passive" to height 500 px and passive-->active, so there would be another method which changes the height back to 100px. The first half is working, I got the class changed, but the second animation won't happen. All I have in html is one div with the class of passive.
$("document").ready(function(){
$(function() {
$(".passive").click(function(){
$(this).animate({height:'500px'});
$(this).addClass("active");
$(this).removeClass("passive");
});
$(".active").click(function(){
$(this).animate({height:'100px'});
$(this).addClass("passive");
$(this).removeClass("active");
});
});
});`
jQuery.animate() is costly and choppy. You will get a smoother transition by just toggling the class and using CSS to transition
.passive {
height:100px;
transition:height 1s;
}
.active {
height:300px;
}
Array
.from(document.querySelectorAll('.passive'))
.forEach(
e => e.addEventListener(
'click',
evnt => e.classList.toggle('active')
)
)
.container { display:flex; }
.container>div {
flex:1 auto;
}
.passive {
background-color:red;
margin:5px;
height:100px;
width:20px;
transition:height 1s;
}
.active {
height:300px;
}
<div class="container">
<div class="passive" tabindex=1></div>
<div class="passive" tabindex=2></div>
<div class="passive" tabindex=3></div>
</div>
You are trying to interact with a class added after the DOM loaded. By default, click functions will only work with elements that exist on load. You can either use event delegation or add a base class to the element. If you add a base class, you can simplify the click function.
You can do an if/else to check if the element has a certain class using hasClass. Also, you can chain together the $(this) methods inside the if/else blocks.
$("document").ready(function() {
$(function() {
$("baseclassname").click(function() {
if ($(this).hasClass('passive')) {
$(this).animate({ height: '500px' });
$(this).addClass("active");
$(this).removeClass("passive");
// $(this).animate({ height: '500px' }).addClass('active').removeClass('passive');
} else {
$(this).animate({ height: '100px' });
$(this).addClass("passive");
$(this).removeClass("active");
// $(this).animate({ height: '100px' }).addClass('passive').removeClass('active');
}
});
});
});
Related
I am trying to make a div that expands in height when clicked on, and then goes back to its original size when clicked on again. I have tried to use .toggle but whenever I do every div (with the related class) completely vanishes. I posted a code pen below so you can easily view the codes effects.
http://codepen.io/JoshuaHurlburt/pen/JKqAPr
<div>
<div class='box' id='emailVer'>
<h2 id='payText'>PAYMENT</h2>
</div>
<div class='box' id='accCust'>
<h2 id='acText'>ACCOUNT CUSTOMIZATION</h2>
</div>
<div class='box' id='pay'>
<h2 id='evText'>EMAIL VERIFICATION</h2>
</div>
</div>
JS:
var main = function(){
$('.box').click(function() {
$(this).animate({
height: "300px"
},200 );
}
)}
$(document).ready(main);
I decided to leave out the CSS, but I will edit it in if anyone thinks it is important to the solution
There's probably a better solution than this but here is one-
Replace your script file with this
var main = function(){
$('.box').click(function() {
var el = $(this);
if (!el.hasClass('selected')) {
el.animate({
"height": "300px"
}, 200)
el.addClass("selected");
} else {
el.animate({
"height": "75px"
}, 200);
el.removeClass("selected");
}
}
)}
$(document).ready(main);
What you need is a way to track what has already been selected (and animated) and what has not. I chose to add a class (selected) and check to see if the element has that class. If it has not yet been selected, animate to 300px and add the class, else animate back to 75px and remove it.
Try .slideToggle
$( "#clickme" ).click(function() {
$( "#book" ).slideToggle( "slow", function() {
// Animation complete.
});
});
The toggle functions in jQuery toggle the visibility of an element which is why they disappear.
I believe what you are looking for is .toggleClass. See http://api.jquery.com/toggleclass/. You can then create another class with the expanded height properties. Which will be toggled on and off on click.
Adding height to your existing transition property on box will handle the animation.
CSS
.box {
width:300px;
height:75px;
margin:0 auto;
-webkit-transition:box-shadow 1s, height 1s;
transition: box-shadow 1s, height 1s;
}
.expanded {
height: 300px;
}
JS
var main = function(){
$('.box').click(function() {
$(this).toggleClass('expanded');
}
)};
$(document).ready(main);
I have four lines of text and I want to display a specific image on mouseenter on the right side of each line.
The problem I'm having right now is that all four images are beeing displayed at the same time.
What am I doing wrong?
http://jsfiddle.net/m97qebjr/10
jQuery:
$(".thumb").hide();
$(".text" ).mouseenter(function() {
$(".thumb").show();
}).mouseleave(function() {
$(".thumb").hide();
});
You don't need jQuery at all: http://jsfiddle.net/m97qebjr/16/
.thumb {
display:none; /* added line */
float:right;
overflow:hidden;
width:100px;
height:100px;
}
.wrap:hover .thumb{ /* added rule */
display:block;
}
$(".thumb") matches all elements with class thumb. Try this instead:
$(".thumb").hide();
$(".text").mouseenter(function () {
$(this).siblings(".thumb").show();
}).mouseleave(function () {
$(this).siblings(".thumb").hide();
});
Updated fiddle: http://jsfiddle.net/m97qebjr/13/
I'm totally new in js and jq. I'am trying force my #cont div to change height on hover with animation and back to previous height without hover, but I dont know how to achieve that. In my test it should make an alert (or make other function), right?
http://jsfiddle.net/JJh9z/1773/
<div id='cont'>
<ul>
<li>an item</li>
<li>an item</li>
<li>an item</li>
<li>an item</li>
<li>an item</li>
</ul>
<div id='ruch'>HOVER</div>
</div>
#cont {
border: 1px solid #000;
height: 200px;
overflow:hidden;
position:relative;
}
#ruch {
position:absolute;
bottom:0px;
}
var result = $("#cont").height();
$('#ruch').hover(function(){
$('#cont').animate({height:'300px'}, 500);
});
if (result == 300) {
alert(result)
}
Your if statement only runs once when the script is first loaded, so no it won't alert each time someone hovers. it is not an event listener.
You need to add another event listener for when the mouse leaves the element (mouseout). See this modified code:
$('#ruch').hover(function(){
$('#cont').animate({height:'300px'}, 500);
});
$('#ruch').mouseout(function(){
$('#cont').animate({height:'200px'}, 500);
});
http://jsfiddle.net/JJh9z/1775/
http://api.jquery.com/hover/
You can specify a handleout event handler, in which you'd restore the element to its previous height.
You also should select not the 'HOVER' div (it's small) but a bigger element (like cont):
$('#cont').hover(
function () {
$('#cont').animate({
height: '300px'
}, 500);
},
function () {
$('#cont').animate({
height: '200px'
}, 500);
});
Here, I've specified a hover-out handler, and focused on 'cont' instead of 'ruch'
http://jsfiddle.net/JJh9z/1773/
There are several ways of doing this. One is to call the 'after animation completes function'. which takes another function as option.. the below example alerts 'Hii' after animating the height to 300px.
$( "#ruch").hover(function() {
$( "#cont" ).animate({
height: "300px"
}, {
duration: 500,
complete: function() {
alert('Hii');
}
});
});
To prevent multiple animations for one hover event since #ruch moves from under the mouse pointer during hover animation, use the following and a current version of jQuery:
var result = $("#cont").height();
$('#ruch').on( 'mouseenter', function(){
$('#cont').animate({height:'300px'}, 500, function() {
alert( result );
});
});
$('#cont').on( 'mouseleave', function(){
if( $(this).height() != result ) {
$(this).animate({height:result}, 500);
}
});
Once the #cont expands the mouse is no longer over #ruch and any slight movement would fire mouseleave and the #cont collapses. To prevent that, attach the mouseleave event to #cont as above.
You could play around with some webkit transitions as well, which is pretty easy.
The problem with adding an event listener for when the mouse leaves the even and queuing up an animation is that you can end up with a queue of many animations if you move your mouse crazily over the div, while this method will only do one animation.
#cont {
border: 1px solid #000;
height: 200px;
overflow:hidden;
position:relative;
-webkit-transition: 0.5s;
}
#ruch {
position:absolute;
bottom:0px;
}
$(document).on('mouseover', '#cont', function() {
document.getElementById('cont').style.height = 300;
});
$(document).on('mouseleave', '#cont', function() {
document.getElementById('cont').style.height = 200;
});
Hello i have the following...
<span id="second" class="content1" style="width:0px; display:inline-block; overflow:hidden; float: left; white-space:nowrap;">
<p style="color:blue; background-color: #b5bdc8;">Camera Reviews</p>
</span>
<li class="laptop"></li>
and the script is:
$(document).ready(function () {
$('.slide1').click(function () {
$('#second').animate({
width: '120px',
}, 1000);
});
});
The problem is that i want the list to be displayed BLOCK... and work as it is PLUS i want the animation to toggle when i click on the list hide/show
Working code here: http://jsfiddle.net/gVjFs/81/
I'm going to ignore the dodgy markup (<li> inside <span> among other things). You can use toggle() here:
$('.slide1').toggle(function () {
$('#second').stop().animate({
width: '120px',
}, 1000);
}, function(){
$('#second').stop().animate({
width: '0',
}, 1000);
});
In your JSFiddle, you show that you are setting the CSS to block for ul li. But this won't work because you do not have any ul tags in your HTML. It also appears that you are using li tags incorrectly. An li tag is like a td tag: it does not make sense outside of its parent tag. For li's that would be an ol or a ul tag. If you want a little circle to click on, use an image of a little circle. Also, wrap your span / a section in a div. That will give you blocked display for free.
Use a combination of click() and toggleClass()
Something like this:
$("#click").click(function() {
$(this).toggleClass('whatever');
});
$(document).ready(function () {
$('.slide1, .slide2, .slide3, .slide4, .slide5').click(function () {
var elem = $('.' + $(this).attr('class').replace('slide','content')),
width = elem.width();
elem.animate({
width: width === 0 ? '120px' : 0,
}, 1000);
});
});
demo
I advise you to set a slide class to all your .slide1, .slide2, .slide3-elements.
I want to show one particular div with the use of fadeTo.
If I hover over div1, then spark1 should be visible and disappear on mouseout..
But it won't do anything when hovering and I don't really know why.
HTML
<div class="spark1"></div>
<div class="div1">text</div>
CSS
.div1 {
width:300px;
height:300px;
}
.spark1 {
position:absolute;
width:27px;
height:27px;
margin-top:70px;
margin-left:395px;
background:url(../img/spark.png) no-repeat;
}
JS
$('.div1').hover(function(){
$('.spark1').fadeTo(200, 0);
});
EDIT (update)
HTML
<div class="spark1"></div>
<div class="div1"></div>
CSS
.div1 {
width:300px;
height:300px;
background-color:#000000;
}
.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:0.0;
}
JS
$('.project1').hover(function(){
$('.spark1').fadeTo(200, 1);
},
function(){
$('.spark1').fadeTo(200, 0);
});
It still won't trigger, I don't get it..
you should stop the animation if the event trigger before completion of previous. try this
$('.div1').hover(function(){
$('.spark').stop(true,true).fadeTo(200, 1);
},function(){
$('.spark').stop(true,true).fadeTo(200, 0);
});
fiddle example : http://jsfiddle.net/mK4m6/11/
Your code works if you use the correct css classes names
DEMO
You define a css class .spark { } but in you code you use the class name .spark1.
Choose one or the other.
You made a mistake in your hover function. It has 2 call back methods:
$(document).ready( function() {
$(".div1").hover(
function(event) {
//hover in
$(".spark1").fadeTo(200,1);
},
function(event) {
$(".spark1").fadeTo(200,0);
});
});
Below is a working script:
http://jsfiddle.net/U8rzJ/7/
Building on Didier's good catch of the class names, there's a problem with your hover() script. hover() can take one or two functions as arguments - if you supply just one, it's executed on both mouseover and mouseout. You'll want this, I think:
$('.div1').hover(function(){
//fade in to 100%
$('.spark').fadeTo(200, 100);
},
function(){
$('.spark').fadeTo(200, 0);
});
This fades the .spark in on mousein and fades it back out on mouseout. If you want to animate on mouseout only, I'd switch from .hover() to .mouseout().
HTML
<div class="spark1"></div>
<div class="div1">text</div>
CSS
.div1 {
width:300px;
height:300px;
}
.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:.0;
}
jQuery
$('.div1').hover(function(){
$('.spark1').fadeTo(200, 1);
},
function(){
$('.spark1').fadeTo(200, 0);
});
Then it all works out.
1. Use correct class names
2. Set the initial opacity of spark1 to 0
3. On mouseenter fade the opacity to 1
4. On mouseleave fade the opacity to 0