I need to animate this animation during exact time. How to easing this animation.
$( "#slice1" ).click(function() {
$("#post1").toggleClass("post"));
});
If you are talking about jquery UI you can use a second optional parameter to set the duration:
$(function() {
$( "#button" ).click(function() {
$( "#effect" ).toggleClass( "newClass", 1000 );
return false;
});
});
DEMO
Related question here
Related
I have a few canvas elements and their appropriate jQuery:
$( "#myCanvas" ).click(function() {
$( "#myHistogram" ).fadeToggle( 0 );
$("#myCanvas").fadeToggle( 0 );
});
$( "#myHistogram" ).click(function() {
$( "#myHistogram" ).fadeToggle( 0 );
$("#myCanvas").fadeToggle( 0 );
});
$( "#stdDevCanvas" ).click(function() {
$( "#stdDevCanvas" ).fadeToggle( 0 );
$("#stdDevHistogram").fadeToggle( 0 );
});
$( "#stdDevHistogram" ).click(function() {
$( "#stdDevCanvas" ).fadeToggle( 0 );
$("#stdDevHistogram").fadeToggle( 0 );
});
Basically you can just toggle between a time chart and a histogram. When I click however, it sends me to the top of the page. I tried:
$( "#myCanvas" ).click(function(e) {
e.preventDefault();
$( "#myHistogram" ).fadeToggle( 0 );
$("#myCanvas").fadeToggle( 0 );
});
And had no success. What is causing the page jump? I've never dealt with this before.
Here's a live page:
http://lavancier.com/brockCharts/aa-research-data.php
Thanks!
EDIT: Upon further inspection, this problem only happens when both times are set to zero. If I change them to 1, it doesn't scroll to the top automatically.
I solved it by getting rid of the ( 0 ).
This works:
$( "#myCanvas" ).click(function() {
$("#myCanvas").hide( );
$( "#myHistogram" ).show( );
});
$( "#myHistogram" ).click(function() {
$( "#myHistogram" ).hide( );
$("#myCanvas").show( );
});
$( "#stdDevCanvas" ).click(function() {
$("#stdDevCanvas").hide( );
$( "#stdDevHistogram" ).show( );
});
$( "#stdDevHistogram" ).click(function() {
$( "#stdDevHistogram" ).hide( );
$("#stdDevCanvas").show( );
});
The reason this happens is because of fading order. The moment you click on a canvas, it fades out leaving a gap then the next canvas is faded in, however the browser sees this gap and scrolls the document to the top because there is no more content below. Of course this happens extremely fast and it's only programatically noticeable.
You can fix this by changing the order
$("#myCanvas").click(function () {
$("#myHistogram").fadeToggle(0);
$("#myCanvas").fadeToggle(0);
});
$("#myHistogram").click(function () {
$("#myCanvas").fadeToggle(0);
$("#myHistogram").fadeToggle(0);
});
$("#stdDevCanvas").click(function (e) {
$("#stdDevHistogram").fadeToggle(0);
$("#stdDevCanvas").fadeToggle(0);
});
$("#stdDevHistogram").click(function (e) {
$("#stdDevCanvas").fadeToggle(0);
$("#stdDevHistogram").fadeToggle(0);
});
Note how the next canvas fades in first then the clicked on fades out, this prevents from the element of leaving a 0 height in the body.
I would like to add a custom class on mouseover. So that when the mouse is hovered over .leftbar, a class is added and it should be popped up(I set css for his). How do I add slow or time delay for the popup?
<script>
$(document).ready(function(){
$( ".leftbar" ).mouseenter(function() {
$( "body" ).addClass( "myclass" );
});
});
$(document).ready(function(){
$( ".leftbar" ).mouseleave(function() {
$( "body" ).removeClass( "myclass1" );
});
});
</script>
I tried this- $( "body" ).addClass( "myclass" , '300'); with no luck
Thank you!
You can use setTimeout
$(document).ready(function(){
$( ".leftbar" ).mouseenter(function() {
window.setTimeout(function(){
$( "body" ).addClass( "myclass" );
}, 300);
});
}):
See https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout
You could take a look at the jQuery UI method addClass which allows you to pass in some animation parameters into it. View the example and documentation here http://api.jqueryui.com/addClass/
For your use, it should be as simple as adding in the delay to addClass()
Add a reference to the jQuery Library, then change your code to;
$("body").addClass("myclass", 300);
Use a setTimeout, being sure to clear it when the cursor leaves.
Minor error, but myclass != myclass1.
$(document).ready(function(){
var barTimeout = 0;
$( ".leftbar" ).on({
mouseenter: function(){
barTimeout = setTimeout(function(){
$( "body" ).addClass( "myclass" );
}, 300);
},
mouseleave: function(){
if( typeof barTimeout !== 'undefined' ) clearTimeout( barTimeout );
$( "body" ).removeClass( "myclass" );
}
});
});
JSFiddle
You can do it like this:
$(document).ready(function () {
$(".leftbar").hover( function () {
$(this).delay(300).queue(function(next){
$(this).addClass("myclass");
next();
});
}, function(){
$(this).delay(300).queue(function(next){
$(this).removeClass("myclass");
next();
});
});
});
Check it out here: JSFiddle
I have a comment section that is initially hidden, and would be revealed by a link on the comment count and/or a link to add comments.
I would like for the comment section to open by either link, but not close if its already opened.
$( "#commentsToggle").click(function() {
$( "#comments" ).toggle( "fast" );
return false;
});
$( ".comment-add a").click(function() {
$( "#comments" ).toggle( "fast" );
return false;
});
See the jsfiddle
http://jsfiddle.net/pQ2np/
Thanks
EDIT: The '#commentsToggle' should be able to toggle (hide) the comments if open, the '.comment-add a' should only show, not hide as it opens an ajax comment form.
This is the code solves my need:
$( "#commentsToggle").click(function() {
$( "#comments" ).toggle( "fast" );
return false;
});
$( ".comment-add a").click(function() {
$( "#comments" ).show( "fast" );
return false;
});
http://jsfiddle.net/pQ2np/6/
If you want them to remain open. use show() instead of toggle().
$( "#commentsToggle").click(function() {
$( "#comments" ).show( "fast" );
return false;
});
$( ".comment-add a").click(function() {
$( "#comments" ).show( "fast" );
return false;
});
You can put both selectors into one function and pass true as the first parameter to showOrhide as referenced in the docs.
$( "#commentsToggle, .comment-add a").click(function() {
$( "#comments" ).toggle( true );
return false;
});
http://jsfiddle.net/pQ2np/3/
Try to use the code in the following link (I have updated your own).
I am not sure why to use toggle and not show. But generally you can check the css display attribute because this is what is used by jquery events.
$( "#commentsToggle").click(function() {
if ($( "#comments" ).css("display") != "block")
$( "#comments" ).toggle( "fast" );
return false;
});
$( ".comment-add a").click(function() {
if ($( "#comments" ).css("display") != "block")
$( "#comments" ).toggle( "fast" );
return false;
});
jsfiddle
Is that you are looking for?
You could use .show() instead of .toggle(), or you could add "true" as one of the parameters:
$( "#commentsToggle").click(function() {
$( "#comments" ).toggle( "fast", true );
return false;
});
$( ".comment-add a").click(function() {
$( "#comments" ).toggle( "fast", true );
return false;
});
Using false instead of true will hide the elements, so using a variable in there could come in useful later.
Here's an updated Fiddle plus enhancements. Below is the gist of it:
$( "#commentsToggle, .comment-add a").click(function (e) {
e.preventDefault();
var $comments = $("#comments");
if ($comments.is(":visible")) {
return;
}
$comments.show("fast");
});
UPDATE: I missed the fact that if you "show" the links again but want to prevent them from being toggled, you only need to use the .show() method. No need for toggle if your intention is for the comments section to appear once and remain open.
$( "#nextFrom1" ).click(function(){
$( "#widget01" ).fadeOut( "slow", function(){
$( "#widget02" ).fadeIn( "slow" );
});
});
$( "#nextFrom2" ).click(function(){
$( "#widget02" ).fadeOut( "slow", function(){
$( "#widget03" ).fadeIn( "slow" );
});
});
$( "#prevFrom3" ).click(function(){
$( "#widget03" ).fadeOut( "slow", function(){
$( "#widget02" ).fadeIn( "slow" );
});
});
$( "#prevFrom2" ).click(function(){
$( "#widget02" ).fadeOut( "slow", function(){
$( "#widget01" ).fadeIn( "slow" );
});
});
Please guide me in the right direction of shortening this code. Objects maybe?! This is just a small chunk of the ever repeating anonymous functions.
Create a functiont to do the binding for you, passing in your respective ids:
function BindClick(clickId, widgetId1, widgetId2){
$( clickId ).click(function(){
$( widgetId1).fadeOut( "slow", function(){
$( widgetId2 ).fadeIn( "slow" );
});
});
}
And calling:
BindClick("#nextFrom1", "#widget01", "#widget02");
//etc
Maybe something like this:
function makeClickHandler(fadeOut, fadeIn){
return function(){
$( "#widget" + fadeOut ).fadeOut( "slow", function(){
$( "#widget" + fadeIn ).fadeIn( "slow" );
})
};
}
$( "#prevFrom2" ).click(makeClickHandler("02", "01") );
Create jquery plugin rather than repeating code
example : http://pranayamr.blogspot.com/2010/11/jquery-plugin-how-and-when-to-use-it.html
Create a jQuery plugin. Here is something to get you started:
(function($) {
$.fn.directWidget = function(options) {
var defaults = {
/* default options go here */
hiding: null,
showing: null,
speed: 'slow'
};
var settings = $.extend({}, defaults, options);
return this.bind('click.directWidget', function(e) {
$(settings.hiding).fadeOut(settings.speed, function() {
$(settings.showing).fadeIn(settings.speed);
});
});
};
})(jQuery);
You can then call like so:
$('#nextFrom1')
.directWidget({ hiding: '#widget01', showing: '#widget02', speed: 'slow' });
I'd like to bind an event to a class, or any alternative to the redundant code I posted below. Any ideas?
thanks,
mna
(function(){
$( "button", "body" ).button();
var submenu=false;
$( "#about" ).click(function() {
$( "#content" ).fadeOut(1000);
$( "#content" ).load('about.html');
$( "#content" ).fadeIn(1000);
});
$( "#community" ).click(function() {
$( "#content" ).fadeOut(1000);
$( "#content" ).load('community.html');
$( "#content" ).fadeIn(1000);
});
$( "#store" ).click(function() {
$( "#content" ).fadeOut(1000);
$( "#content" ).load('store.html');
$( "#content" ).fadeIn(1000);
});
$( "#projects" ).click(function() {
$( "#content" ).fadeOut(1000);
$( "#content" ).load('projects.html');
$( "#content" ).fadeIn(1000);
});
});
Either use the multiple selector
$("#about, #community, #store, #projects").click(function() {
$("#content").fadeOut(1000)
.load(this.id + '.html')
.fadeIn(1000);
});
or give these elements the same class and use
$('.classname').click(...);
Update:
I've seen that #pointy had a good point, but he deleted his answer: You probably want for fadeOut, load, fadeIn to occur one after another. Then you have to put them in callbacks:
$("#content").fadeOut(1000, function() {
$(this).load(this.id + '.html', function() {
$(this).fadeIn(1000);
})
});
See their documentation for more information.
How about this?
Set the class load-content to all of the elements that you want to bind the click event to.
(function(){
$("button, body").button();
var submenu=false;
$(".load-content").click(function() {
$("#content").fadeOut(1000).load(this.id+'.html').fadeIn(1000);
});
});