For some reason, when I try to toggle a div between two sizes using .animate, it simply disappears rather than scaling to the size I want it to. I have played with all of the the syntax and little things in so many ways, but nothing works. Here is the jquery that I have used and messed around with a bunch.
$("#expandable").click(
function() {
$("#expandable").toggle(
function() {
$("#expandable").animate(
{width:600, height:600}
)
},
function() {
$("#expandable").animate(
{width:400, height:200}
);
}
);
}
);
I have a jsfiddle here for you to look at.
http://jsfiddle.net/justinbc820/qt7GV/
Try it without using toggle
http://jsfiddle.net/qt7GV/9/
$(document).ready(function(){
$("#expandable").click(function(){
var divheight = $(this).height();
if (divheight == 400)
{
$(this).animate({height:'150px', width:'150px' });
}
else
{
$(this).animate({height:'400px', width:'400px' });
}
});
});
Take a look at this http://jsfiddle.net/qt7GV/4/
$("#expandable").click(function() {
if ($(this).width() < 600) {
$(this).animate(
{width:600, height:600}
)
} else {
$(this).animate(
{width:400, height:200}
);
}
});
http://api.jquery.com/toggle/
Description: Display or hide the matched elements.
var on = false;
var box = $("#expandable");
box.click(
function() {
if (on = !on) {
box.animate(
{width:600, height:600}
)
} else {
box.animate(
{width:400, height:200}
);
}
}
);
According to http://api.jquery.com/toggle-event/
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.
Here is one way to do it
$('#expandable').data('flag', true);
$("#expandable").click(
function() {
$("#expandable").animate(
$(this).data('flag')
? {width:600, height:600}
: {width:400, height:200}
)
$(this).data('flag', !$(this).data('flag'));
}
);
Related
Note: The examples are tested with chrome.
Firefox ia not working.
I have this js code to append css transitions.
For a single image (working):
var isTransition = false;
var isRemoveQueue = false;
$( ".text" ).bind( "webkitTransitionEnd mozTransitionEnd transitionEnd", function () {
isTransition = false;
if ( isRemoveQueue ) {
$( this ).removeClass("animated-hover");
}
});
$(".text").on( 'mouseenter', function () {
$(this).addClass("animated-hover");
isTransition = true;
isRemoveQueue = false;
});
$(".text").on( 'mouseleave', function () {
if ( !isTransition ) {
$( this ).removeClass( "animated-hover" );
} else {
isRemoveQueue = true;
}
});
fiddle: https://jsfiddle.net/drecodeam/3pb38v4f/6/
It was important to me, that the transition does not stop if you just hover quick over the image. It is working good with one image.
Here is the thing: If i am using more images than one, i have weird effects, like the transition getting stuck e.g.
Example with more images:
https://jsfiddle.net/3pb38v4f/9/
Beside it is not working correctly, it is also not working with firefox.
You could just use
$(".text").on( 'mouseleave', function () {
$( this ).removeClass( "animated-hover" );
isRemoveQueue = true;
});
I think you over thought it a little :)
Hoverflow is exactly what i was looking for.
It can handle the queuing in js very nice and clean :)
http://www.2meter3.de/code/hoverFlow/
I want to hide a div once my slider passes a scrollTop() value of 200px. I've looked at this article and tried using it as a template for what I want. I have the following code, but its not hiding the element. Live site
function removeArrow() {
$(window).scroll(function() {
if($('.portfolio-sliders:first-child').scrollTop() > 100) { //use `this`, not `document`
$('.scrl-dwn').css({
'display': 'none'
});
}
});
}
UPDATE
I've updated by code:
function removeArrow() {
$(window).scroll(function() {
var slider = $('.portfolio-sliders:first-child').position.top;
if(slider >= 10) {
$('.scrl-dwn').hide();
}
});
}
which should work, but its not...
Position is a function, not a property. You need to call the function with ():
var slider = $('.portfolio-sliders:first-child').position().top;
Replace your whole removeArrow function with this code.
(If you open your live site, and run this in the console, you can see it's working).
The scroll event never fired, so I handled theese mousewheel events instead.
$(window).bind('DOMMouseScroll mousewheel', function() {
var div = $(".portfolio-sliders:first-child"),
top = div.position().top,
display = top < 400 ? 'none' : '';
$('.scrl-dwn').css({ 'display': display });
});
Use This :
$(window).scroll(function(){
if ($(window).scrollTop() > 660)
{
$(".Left-Section").css("position", "fixed");
$(".Center-Content").css("margin-top", "0");
$(".Right-Nav img").css("transform", "rotate(360deg)");
}
;)
I'm trying to toggle a divs height, but when I do it only clicks once on and once off. Is there anyway to get it to toggle no matter how many times I click? Thanks! Here's my code:
$(document).ready(function () {
$('#block1').click(function () {
toggle = document.getElementById('block1').style.height;
if (toggle <= 30) {
$("#block1").css('height', '200px');
} else $("#block1").css('height', '30px');
});
});
document.getElementById('block1').style.height returns 30px.
'30px' <= 30 returns false, so the height keeps getting set to 30px.
You could use .height(), which returns a number, but I'd suggest using a class and toggling:
http://jsfiddle.net/TQs6h/
$(document).ready(function () {
$('#block1').click(function () {
$(this).toggleClass('tall');
});
});
As you are using jQuery I will suggest you to use height() method it will return Integer value you can compare instead of String value.
$(document).ready(function () {
$('#block1').click(function () {
var toggle = $( this ).height();
if (toggle <= 30) {
$( this ).css('height', '200px');
} else $( this ).css('height', '30px');
});
});
Or you can use parseInt function:
var toggle = parseInt( document.getElementById('block1').style.height, 10) ;
See jsFiddle demo
Since toggle is deprecated I used this to toogle div:
$("#syndicates_showmore").on("click", function () {
if (!clicked) {
$('#syndicates').fadeTo('slow', 0.3, function () {
$(this).css(
{
'height': 'auto',
'overflow': 'none'
});
}).fadeTo('slow', 1);
setTimeout(function () {
$("#syndicates_showmore").text("Show less");
}, 500);
clicked = true;
}
else {
$('#syndicates').fadeTo('slow', 0.3, function () {
$(this).css(
{
'height': '290px',
'overflow': 'hidden'
});
}).fadeTo('slow', 1);
setTimeout(function () {
$("#syndicates_showmore").text("Show more");
}, 500);
clicked = false;
}
});
Is there any cleaner way to do this?
According to the jQuery 1.9 Upgrade Guide:
.toggle(function, function, ... ) removed
This is the "click an element to run the specified functions" signature of .toggle(). It should not be confused with the "change the visibility of an element" of .toggle() which is not deprecated. The former is being removed to reduce confusion and improve the potential for modularity in the library. The jQuery Migrate plugin can be used to restore the functionality.
In other words, you can still use .toggle like this:
var clicked = false;
$("#syndicates_showmore").on("click", function () {
clicked = !clicked;
var showText = "Show " + (clicked ? "more" : "less");
$('#syndicates').toggle(function () {
$("#syndicates_showmore").text(showText);
});
});
Taken from jQuery API
$("#clickme" ).click(function() {
$( "#book" ).toggle( "slow", function() {
// Animation complete.
});
});
The best alternative is to use .toggleClass():
$("#syndicates_showmore").on("click", function () {
$('#syndicates').toggleClass("newClass, 1000", "easeInOutBounce")
});
jQuery .toggleClass() API Documentation:
Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's
presence or the value of the switch argument.
If using with jQuery UI you can easily animate it with using different easing options.
Easings:
Easing functions specify the speed at which an animation progresses at
different points within the animation. jQuery UI provides several additional
easing functions, ranging from variations on the swing behavior to
customized effects such as bouncing.
Example online
Hopefully this is a simple request. I found this code that will work perfectly for what I want to do (Rotate through list items while fading in and out) http://jsfiddle.net/gaby/S5Cjm/1/ . However, I am looking to have the animation pause on mouse over and resume on mouse out. I am a novice at the moment with Javascript and JQuery, so any help would be appreciated.
Thanks.
EDIT: Side questions: Is there a benefit to using JQuery to do this? Would a stand alone script be more appropriate?
I attached the hover event to your list items. The over function stops the animation and all following animations using jQuery.stop(true). The out function resumes the animation:
http://jsfiddle.net/US4Fc/1/
var duration = 1000
function InOut(elem) {
elem.delay(duration).fadeIn(duration).delay(duration).fadeOut(
function() {
if (elem.next().length > 0) {
InOut(elem.next());
}
else {
InOut(elem.siblings(':first'));
}
});
}
$(function() {
$('#content li').hide().hover(
function() {
$(this).stop(true)
},
function() {
var curOp = Number($(this).css("opacity"));
$(this).fadeTo(duration*(1-curOp), 1, function() {
InOut($(this))
});
}
);
InOut($('#content li:first'));
});
Will this work for you?
$(function(){
var active;
$('#content li').hide().hover(
function(){
active = $(this).stop();
},
function(){
active && InOut(active);
}
);
InOut( $('#content li:first') );
});