$( "#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' });
Related
So I have this code and it works:
$('.col-main').on('mouseenter', '.product-wrapper', function () {
$( this ).addClass( "js-hover" );
});
$('.col-main').on('mouseleave', '.product-wrapper', function () {
$( this ).removeClass( "js-hover" );
});
But I want it to be a bit more elegant. Something like this:
listContainer.on( {
mouseenter: function() {
$( this ).addClass( "js-hover" );
console.log( "hoooover" );
},
mouseleave: function() {
$( this ).removeClass( "js-hover" );
}
}, productWrapper );
But I can´t get it to work :) Any help is appreciated
I think the problem is with productWrapper variable. Try like followoing.
var listContainer=$('.col-main')
var productWrapper='.product-wrapper';
listContainer.on( {
mouseenter: function() {
$( this ).addClass( "js-hover" );
console.log( "hoooover" );
},
mouseleave: function() {
$( this ).removeClass( "js-hover" );
}
}, productWrapper );
sth like this?
$('.col-main').on('mouseenter mouseleave', '.product-wrapper', function (e) {
$( this ).toggleClass( 'js-hover', e.type === 'mouseenter');
});
The jQuery hover and toggle functions could be useful to you.
$('.element-selector').hover(function(){
$(this).toggleClass('.class-to-toggle');
}, function(){
$(this).toggleClass('.class-to-toggle');
})
Fiddle: https://jsfiddle.net/sdso2219/
Update
Since you have now mentioned that this needs to work for dynamic elements, modify the .hover to .live, eg:
$('.element-selector').live('mouseenter', function(){
$(this).toggleClass('.class-to-toggle');
}).live('mouseleave', function(){
$(this).toggleClass('.class-to-toggle');
})
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.
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
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);
});
});