How to hide class first and show only on hover in jQuery? - javascript

I have following toggling script:
$('.edit_bg').on({
mouseenter: function () {
$(this).addClass('edit_bg');
},
mouseleave: function () {
$(this).removeClass('edit_bg');
}
});
But this works after i first hover that div.
How should I remove all .edit_bg classes from divs on start and be able to show them on hover?

After the on function just do removeClass.
$('.edit_bg').on({
mouseenter: function () {
$(this).addClass('edit_bg');
},
mouseleave: function () {
$(this).removeClass('edit_bg');
}
}).removeClass('edit_bg');

I understand what you are trying to achieve using Javascript/jQuery, but you can achieve it simply using css:
.edit_bg
{
background-color: blue;
}
.edit_bg:hover
{
background-color: red;
}
Look, ma! No javascript! http://jsfiddle.net/adrianonantua/rv9ht/

Related

how to animate page background when text is input to a field

I am trying create this effect on a website I am creating:
http://www.fischerspooner.com/
Does anyone know how to achieve this animation?
Thanks
Stephanie
Just inspect the source of the website. This is how it's done.
$(function () {
$('input').focus().keyup(function () {
$('body').addClass('strobo');
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function () {
$('body').removeClass('strobo');
}, 200);
});
});
CSS
.strob {
background-color: blue;
}

Javascript Hover and Toggle

My navigation is hidden and hover is showing but disappearing immediately, I want the navigation to show on hover and display: none on mouse out of the element
$(document).ready(function(){
$("#nav-holder").hover(function () {
$("nav").animate({height: 'toggle'});
});
});
$(document).ready(function(){
$("#nav-holder").mouseover(function(argument) {
$("nav").show();
})
$("#nav-holder").mouseout(function(argument) {
$("nav").hide();
})
});
You should use mouseenter and mouseleave instead of hover:
$(function() {
$("#nav-holder")
.mouseenter(showNavigation)
.mouseleave(hideNavigation)
})
function showNavigation() {
$("nav").show("fast")
}
function hideNavigation() {
$("nav").hide()
}

How make this slider with mouse over action?

I created this slider and I want to mouse over action on numbers jquery but I can't seem to get it to work, Does anyone know how I can achieve this? Every time I tried something it seemed to break the slider.
thanks
jsfiddle version: http://jsfiddle.net/BijanZand/cmqkc59b/
Here is the current code:
function tabsrotate() {
$("#slider_a, #slider_b").tabs({
show: function (event, ui) {
var lastOpenedPanel = $(this).data("lastOpenedPanel");
if (!$(this).data("topPositionTab")) {
$(this).data("topPositionTab", $(ui.panel).position().top);
}
$(ui.panel).hide().fadeIn(1500);
if (lastOpenedPanel) {
lastOpenedPanel.toggleClass("ui-tabs-hide").css("position", "absolute").css("top", "0").fadeOut(1500, function () {
$(this).css("position", "");
});
}
$(this).data("lastOpenedPanel", $(ui.panel));
}
}).tabs('rotate', 7777, true);
}
$(document).ready(function () {
tabsrotate();
$('.tabnavigation').css("display", "inline");
});
You can attach a mouseover event to your anchor using jQuery and inside this event trigger the anchor click:
Your $(document).ready will look like this:
$(document).ready(function () {
tabsrotate();
$('.tabnavigation').css("display", "inline");
$('.tabnavigation li a').mouseover(function(){
$(this).click();
});
});

My resetActive is not working

Why does my resetActive call does not work, the background yellow pulls but the resetActive does not. Here is my code:
$(document, "#ReloadPage").on('mouseover', function() {
resetActive()
$("#ReloadPage").css("background-color","yellow");
});
Why does my resetActive call does not work?
CSS:
#ReloadPage:hover {
background-color: yellow
}
JavaScript:
$('#ReloadPage').on('mouseover', function () {
resetActive();
});

alternatives to jquery animate?

On hover I want my div to scroll down.
I know i can use the .animate({left: 0}, "slow"); but this doesnt go down but what else does jquery have to offer?
Here is my jsfiddle: http://jsfiddle.net/WZvPk/4/
hover over the sectors box and you will see the "view project" move down. I need it to move down in a slow fashion similar to http://www.jeremymartin.name/examples/kwicks.php?example=3
Then need the opacity to be so my image is darker.
edit: slide down wont work with this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage").children(".showme").css("display", "block").css("margin-top", "-5px");
},
function () {
$("div.sectorImage div.showme").css("display", "none");
}
);
You probably want jQuery slideDown, see: http://api.jquery.com/slideDown/
Edit:
So something like this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage")
.children(".showme")
.css("display", "block")
.css("margin-top", "-5px")
.slideDown("slow");
},
function () {
$("div.sectorImage div.showme").hide();
}
);
You could also, add a css class with the margin-top and display-block property, like:
.slideDown { display: block !important; margin-top: 5px !important; }
/* !important so they won't be overwritten..*/
Then you can do something like this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage")
.children(".showme")
.addClass("slideDown")
.slideDown("slow");
},
function () {
$("div.sectorImage div.showme").hide();
}
);
What about css3 transitions? They are smooth and are starting to be widely supported.
Here's an example which doesn't use javascript at all.
Update : Another example that doesn't use opacity.
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage").children(".showme").css("display", "block").animate({"margin-top": "-5px"}, "slow");
},
function () {
$(this).children(".sectorImage").children(".showme").css("display", "none").css("margin-top","-25px");
}
);​
​Now it works
$(".sectorGrid").hover(
function () {
$(".showme").css("margin-top", "-25px");
$(this).children(".sectorImage").children(".showme").css("display", "block").animate({"margin-top": "-5px"}, 'slow');
},
function(){
$(".showme").css("display", "none")
}
);
​
​

Categories

Resources