I've been having an issue getting this working.
I am able to get the ID based on the Class of a div, and output it to the screen, but I cannot get the fadeIn method to work on the same div.
here is what I have so far at jsFiddle: http://jsfiddle.net/Y8Ara/1/
and here is the jQuery:
$('.courseLink').mouseover(function() {
$('div#courseTitle').text(this.id);
});
If at all possible, I would also like to make the text fade out on mouseout as well.
Any help is greatly appreciated!
SOLVED: Thanks to Adil & roasted! I have also added the fadeOut functionality if anyone else was wondering - http://jsfiddle.net/Y8Ara/17/
Could be done like this:
DEMO
$('.courseLink').hover(function() {
$('div#courseTitle').hide().fadeIn().text(this.id);
},function(){
$('div#courseTitle').stop().fadeOut();
});
do you mean something like:
$('.courseLink').on({
mouseenter: function() {
$('div#courseTitle').hide().text(this.id).fadeIn("slow");
},
mouseleave: function() {
$('div#courseTitle').text('');
}
});
Related
I'm with a problem, and I need your help.
So, I'm trying to make a menu that show the content when you do a mouse hover in a li tag. And the first content need to be always showing when you do a mouse over on the first li option, or when no one li is hovered.
I tried to make this, and you can see a demo here: https://jsfiddle.net/sqftzuja/
As you can see, it's isn't work so fine and some times it show more than one content.
My script
$(document).ready(function() {
$("#nav3 li:first-child").addClass("tab-active");
$('#nav3 li').click(function() {
var section4 = $(this).attr('data-id');
$("#nav3 li").removeClass("tab-active");
$(this).addClass("tab-active");
$('.tv-corporativa').hide();
$(section4).fadeIn(800);
});
});
If anyone can help me improve it it will help me a lot!
Thanks in advance!
jquery hover takes two arguments, one is for the pointer entering the element and the other is for when it leaves the element.
e.g.
$('selector').hover(one_function, two_function)
you can either use hover and call the second function or use the onmouseover event.
here's the fiddle for onmouseover https://jsfiddle.net/sqftzuja/1/
You code is correct. You just need to stop the running animation.
$(section4).stop( true, true ).fadeIn(800);
This will solve you problem in the old code.
you must stop fade in animation.when you fade in it effects after given interval.i updated fiddle as well
$(document).ready(function() {
$("#nav3 li:first-child").addClass("tab-active");
$('#nav3 li').hover(function() {
//console.info( $(this).attr('href') );
var section4 = $(this).attr('data-id');
$("#nav3 li").removeClass("tab-active");
$(this).addClass("tab-active");
$('.tv-corporativa').stop().hide();
$(section4).fadeIn(800);
});
});
I created this slide menu, activated by a button. I'm using toggle(); to do that. But, I need two CSS effects: fadeIn and fadeOut.
So, I put addClass(); to solve the problem. Sucess! But I can't do the same to fall the menu back. For example: Click on the button and add FadeIn class. The menu appears. Then, you have to click on the same button again, To remove fadeIn class and add the fadeOut class.
This is my actual code:
$(function(){
$('.menu-btn').click(function(){
$('.leftmenu').toggle();
$('.leftmenu').addClass('fadeInLeft animated');
});
});
And here my working example http://jsfiddle.net/N8S9y/
Any help will be much appreciated. thanks in advance!
This will work for you
$(function(){
$('.menu-btn').click(function(){
$('.leftmenu').toggle();
if($('.leftmenu').hasClass('fadeInLeft'))
{
$('.leftmenu').removeClass('fadeInLeft').addClass('fadeOut');
}
else
{
$('.leftmenu').removeClass('fadeOut').addClass('fadeInLeft');
}
});
});`
I think you're looking for .toggleClass():
$('.leftmenu').toggleClass('FadeIn fadeOut');
My goal is to change the background color of an element and one of its siblings that is higher in the DOM but in the same parent on hover. I was able to use css transition to change the first element but i couldn't get the sibling to change. so I looked into jquery UI addClass effect
I wanted the code below to work since I couldn't get a css solution to work, the goal was to change both elements on hover
$(document).ready(function(){
$('.circletag').hover(function() {
$(this).addClass( "red");
$(this).parent().find('title').addClass('red', 2000);
}, function() {
$(this).removeClass('red', 5000);
$(this).parent().find('title').removeClass('red', 2000);
});
})
I was able to get a fade effect on the $(this) elements but the .title element is not showing any changes at all.
when .circletag is hovered I would like .circletag backgroud to change and the .title background to change at the same time over a 2 second interval. If It cant be done with css which is the way I would prefer the solution I would appreciate a jquery one.
Also I'm curios to know why the console says
SyntaxError: syntax error
.ui-helper-hidden {
Why does the duration not work in this addClass function when im using jquery ui? So weird for me.
why is it that when the mouse is moves off the element it does not take 5 seconds to remove the class? it looks like the css transition rule is calling the shots.
basically I want the div with the class of .title's backgound and .circletag background to fade in and out on hover of .circletag.
jsfiddle
Thanks for your help guys.
Try it like this:
$(document).ready(function(event){
$('.circletag').hover(function() {
$(this).addClass( "red");
$(this).parent().find('.title').addClass('red', 2000);
}, function() {
$(this).removeClass('red', 5000);
$(this).parent().find('.title').removeClass('red', 2000);
});
})
You need to specify the class selector in 'find' function..
Let me know :)
Try this,
$(this).parent().find('.title').addClass('red', 2000);
you need to use ".title" inside your find() if you are referring a class.
Fiddle
Hope this helps.
I have a use case whereby i know that all the divs i am interested in will have the word 'tabz' in them but have yet to find a way to fire my jquery when a user clicks on a div with such an id.
$('div[id=*"tabz"]').on("click", function()
{
alert(event.target.id);
});
This is what i have however the alert never fires.
When I replace the method with :
$('div').on("click", function()
{
alert(event.target.id);
});
it will give me the following:
tabz91
So i know there are divs that meet my selector but it I am unsure as to why the alert is not firing.
Any help greatly appreciated
The correct syntax is simply
$('div[id*="tabz"]')
(the = and the * are inverted in your example).
You may use
$('div[id$="tabz"]')
if the id attribute ends with your pattern.
$('div[id*="tabz"]').on("click", function()
{
alert(event.target.id);
});
It's a typo, * and = inverted. See this example : http://jsfiddle.net/Xcn6N/
try instead of =* it is *=
$('div[id*="tabz"]').on("click", function() {
alert(event.target.id);
});
For Further Assistance on Selectors in jQuery see this page
jQuery Selectors
I am playing around with this fiddle I found which is really close to what I am trying to do:
http://jsfiddle.net/5N3YK/20/
The only thing is that when I try to change the section tags to div tags it breaks, and also I want the div's to fade instead of slide.
Help is always greatly appreciated!
Try - http://jsfiddle.net/UDt7q/21/
(function($) {
$.fn.Fader = function() {
this.each(function() {
$('a').bind('click', function(e) {
e.preventDefault();
$( "#hello div" ).fadeOut();
$( "#hello div" + $(this).attr('href') ).fadeIn();
})
});
}
})(jQuery);
Updated fiddle: http://jsfiddle.net/UDt7q/22/
This should work for you:
http://jsfiddle.net/5N3YK/23/
I changed the functionality of the code to hide the divs rather than push them off the page, but the idea is the same.
sections are now divs and they fade rather than slide.
To make something "appear", you can use
$('.selector').fadeIn();
from Jquery. Similarly, you can show(), hide(), fadeOut()