i need to add effect to text when mouse is hover is.
my js code :-
var j = jQuery.noConflict();
j(document).ready(function() {
j('.related_box ul li').hover(function(event) {
j(this).stop().animate({ right: "-5px" }, {duration: 'slow',easing: 'easeOutElastic'});
}
,
function(){
j(this).stop().animate({ right: "-75px" }, {duration: 'slow',easing: 'easeOutElastic'});
});
});
Html code :-
<div class="related_box">
<ul class="related_list_ul">
<li class="related_list"><h3><span>«</span> About us</h3></li>
<li class="related_list"><h3><span>«</span> Call us</h3></li>
<li class="related_list"><h3><span>«</span> Contact us</h3></li>
</ul>
</div>
How to Add Effect to text when over it by mouse.
You need to make sure the element you want to animate is position: relative; or position: absolute;, otherwise changing right won't have any effect.
try this one
j('.related_box > ul > li > a').hover(function(event) {
li.related_list a:hover{ color: #xyz; }
you can do it using CSS
Use mouseover() http://api.jquery.com/mouseover/
Example: (test here http://jsfiddle.net/y8GYq/)
var j = jQuery.noConflict();
j(document).ready(function() {
j("li").mouseover(function(){
j(this).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
}); // animate
});
});
Related
I have a menu that appears when I click an icon. Currently I can close it by clicking the 'close' icon, but I would like to be able to close it by clicking anywhere outside of the menu, when the menu is visible.
Here is a jsFiddle: http://jsfiddle.net/budapesti/3v5ym2bp/3/
For example the following doesn't work:
$(document).click(function() {
if($('.menu').is(":visible")) {
$('.menu').hide()
}
});
I found similar questions, such as jQuery: Hide element on click anywhere else apart of the element and How do I detect a click outside an element?, but couldn't get the solutions to work for me.
EDIT: I wonder if is(":visible") works with jQuery "animate"?
call close function on anywhere click on window. And use event bubbling.
i had update it its jsfiddle link is
> http://jsfiddle.net/rahulrchaurasia/3v5ym2bp/19/
Try this : http://jsfiddle.net/3v5ym2bp/13/
html
<div class="inv"></div><!-- Added an invisible block -->
<div class="menu"> <span class="glyphicon glyphicon-remove closed pull-right"></span>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div class="icon-menu"> <span class="glyphicon glyphicon-menu-hamburger"></span>MENU</div>
css
.menu {
position: fixed;
width: 285px;
height: 100%;
left: -285px;
background: #202024;
z-index: 1;
}
.glyphicon-remove, ul {
color: #fff;
padding: 10px;
}
/* Added an invisible block */
.inv {
display:none;
width:100%;
height:100%;
position:fixed;
margin:0;
}
jQuery
"use strict";
var main = function () {
$('.icon-menu').click(function () {
$('.icon-menu').hide();
$('.inv').show(); //added
$('.menu').animate({
left: "0px"
}, 200);
});
//Added
$('.inv').click(function () {
$('.inv').hide();
$('.menu').animate({
left: "-285px"
}, 200);
$('.icon-menu').show();
});
$('.closed').click(function () {
$('.inv').hide();//added
$('.menu').animate({
left: "-285px"
}, 200);
$('.icon-menu').show();
});
};
$(document).ready(main);
Another simple example : http://jsfiddle.net/3v5ym2bp/17/
I suggest you bind an event on document click after menu has been shown, the event that will ensure that every click anywhere outside menu will close it.
$(document).on("click.menu",function(event) {
var target = $(event.target);
if (!target.closest(".menu").length || target.closest(".closed").length) {
closeMenu(function() {
$(document).off("click.menu");
});
}
});
here you'll have to evaluate event object, and what trigger it - which element if it's inside menu (apart from the close button) then don't do nuffing, if outside - then close the menu. All the closing stuff is put to the separate function. also don't forget to unbind this handler from document after closing
http://jsfiddle.net/3v5ym2bp/15/
working demo
Use css attribute left to detect if the menu is visible instead of :visibe because it's bot work with chrome, see jquery .is(“:visible”) not working in Chrome.
You have just to detect if the menu is visible (use the css attribute left) because if the menu css left=0px that mean it's visible, and after that if the click is outside of menu or not and so if outside close it.
Take a look at Your updating fiddle work fine just by adding the following handle that detect outside click :
JS :
$(document).click(function(e) {
//if the menu is visible
if($(".menu").css('left') =="0px"){
//if the click is outside of menu
if($(e.target).closest('.menu').length == 0){
$('.closed').click();
}
}
});
var main = function() {
$('.icon-menu').click(function() {
$('.icon-menu').hide();
$('.menu').animate({
left: "0px"}, 200);
});
$('.closed').click(function() {
$('.menu').animate({
left: "-285px"}, 200);
$('.icon-menu').show();
});
};
$(document).ready(main);
var rahul=0;
$(window).click(function(e) {
$('.menu').animate({
left: "-285px"}, 200);
$('.icon-menu').show();
});
.menu {
position: fixed;
width: 285px;
height: 100%;
left: -285px;
background: #808080;
z-index: 1;
}
.glyphicon-remove, ul {
color: #fff;
padding: 10px;
}
<div class="menu" onclick="event.cancelBubble=true;">
<span class="glyphicon glyphicon-remove closed pull-right"></span>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
<div class="icon-menu" onclick="event.cancelBubble=true;">
<span class="glyphicon glyphicon-menu-hamburger"></span>*MENUS*
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
I'm trying to dim the background while slide-opening the left menu to right.
Here is the link and jsfiddle.
At first run, when the dimmer code is commented out, it hides sliding to left and after the 2nd click its working okay. When the dimmer code is included, it doesn't remove the class='dimmer' and I can't click again.
Here is the jQuery:
jQuery(document).ready( function(){
jQuery(".x-btn-navbar").click(function(){
//if (jQuery('#dimmer').hasClass('dimmer')){
//jQuery('#dimmer').removeClass('dimmer');
//} else {
//jQuery('#dimmer').addClass('dimmer');
//}
jQuery('.nav-animate').fadeIn(500);
jQuery('.nav-animate nav').toggle('slide', {direction:'left'}, 500);
});
});
Any help is appreciated, thanks for your time.
Done, I guess...
Changes in HTML
<div class="x-navbar-wrap" style="z-index:999;">
<div class="x-navbar x-navbar-fixed-left">
<div class="x-navbar-inner">
<div class="x-container max width">
<a data-target=".x-nav-wrap.mobile" class="x-btn-navbar" href="#">
<span style="margin:-17px;font-size:20px;">MENU</span>
</a>
<!------- You didn't had these closing tags ---->
</div>
</div>
</div>
CSS changes
#dimmer {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
JavaScript
jQuery(document).ready( function(){
jQuery('.nav-animate nav').hide('slide', {direction:'left'}, 500);
jQuery(".x-btn-navbar").click(function(){
jQuery('#dimmer').fadeIn(250, function(){
jQuery('#dimmer').fadeOut(250);
})
jQuery('.nav-animate').fadeIn(500);
jQuery('.nav-animate nav').toggle('slide', {direction:'left'}, 500);
});
});
Working Fiddle
Maybe this will help you:
jQuery('.nav-animate nav').css({
opacity: 0,
left: -$('.nav-animate nav').outerWidth()
});
jQuery(".x-btn-navbar").click(function () {
if (jQuery('#dimmer').hasClass('dimmer')) {
jQuery('#dimmer').removeClass('dimmer');
jQuery('.nav-animate nav').animate({
opacity: 0,
left: -$('.nav-animate nav').outerWidth()
}, 500);
} else {
jQuery('#dimmer').addClass('dimmer');
jQuery('.nav-animate nav').animate({
opacity: 1,
left: $('.x-btn-navbar').outerWidth()
}, 500);
}
});
JSFiddle Demo: http://jsfiddle.net/kq5vo508/2/
i hope i got your question right, but from the link you attached it seems that you have a problem with the first click on the menu button and that later on confuse the dimmer status.
in your HTML you have the nav section
<section class="nav-animate">
<nav style="height:auto;" class="x-nav-wrap mobile cbp-spmenu cbp-spmenu-vertical cbp-spmenu-push">
And your css sets .nav-animate to not be displayed, try removing that setting and instead set the inner nav tag to display:none;
Target functionality is to expand AND collapse the form field by clicking on the image as seen in the fiddle (http://jsfiddle.net/phamousphil/4jw42kza/). Currently I have expand working using .animate(), however after much fiddling I can't find a way to collapse.
My question is twofold:
1. How can I implement the opposite animation to collapse the form when clicking on the image?
2. (bonus) How can I use .animate() to leverage CSS visibility to fully hide the form when collapsed? My attempt to implement this failed.
Code below:
HTML:
<input class='header-search-box' type='text' id='search-string' name='search-string'>
<img src=' http://findicons.com/files/icons/974/glyphish/18/magnifying_glass.png' class='magnifying-glass' />
CSS:
.header-search-box {
}
.header-search-box {
width: 0px;
}
.magnifying-glass {
}
JavaScript:
$(function(){
var mglass = $('.magnifying-glass');
var form = $('.header-search-box');
mglass.click(function(){
form.animate({'width': '100px'}, 'slow');
});
});
$(function () {
var mglass = $('.magnifying-glass');
var form = $('.header-search-box');
mglass.click(function () {
if (form.is(':hidden')) form.show()
form.animate({
'width': form.width() == 100 ? '0px' : '100px'
}, 'slow', function () {
if (form.width() == 0) form.hide()
});
});
});
jsFiddle example
You can easily achieve it by toggling a 'expanded' class and using CSS3 to handle the animation (and visibility):
CSS:
.header-search-box {
visibility: hidden;
width: 0;
transition: all 0.3s ease;
}
.expanded {
visibility: visible;
width: 100px;
}
JS:
$(function(){
var mglass = $('.magnifying-glass');
var form = $('.header-search-box');
mglass.click(function(){
form.toggleClass('expanded');
});
});
Fiddle here: http://jsfiddle.net/8rLmokp1/
I'm trying to add a hidden sidebar on my website. This is what exactly what I want to achieve: http://demo.themebeans.com/pinto/ but I wanted it to show in hover instead of click. just instead of a click... just want my visitors to just hover on it.
Here's what I have so far. I want it to be positioned the same with the sample I've given above. :( Can someone help?
#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#nav a span{margin:0 10px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}
jQuery:
$(function(){
$('#nav').hover(function(){
$(this).animate({width:'200px'},500);
},function(){
$(this).animate({width:'35px'},500);
}).trigger('mouseleave');
});
HTML:
<div id="nav">
Contents of the sidebar like the one on my sample.
</div>
http://jsfiddle.net/yztJ8/ here's the fiddle.
You need to set the absolute positioning correctly:
#nav { position: absolute; top: 0px; right: 0px; }
Just change left: 0; to right: 0; - here is the updated fiddle: http://jsfiddle.net/yGBkV/
I strongly recommend you use the hoverIntent plugin - the user experience will improve a lot:
http://cherne.net/brian/resources/jquery.hoverIntent.html
Here is a mix of pure JS and jQuery.
(function() {
var oNav = document.getElementById('nav');
oNav.addEventListener('hover', function() {
$('#nav').fadeIn();
}, false);
})();
This probably should work.
simply try
$('#nav1').bind("mouseenter", function() {
$('#nav').animate({width:'200px'},500);
});
$('#nav1').bind("mouseleave", function() {
$('#nav').animate({width:'0px'},500);
});
jsfiddle: http://jsfiddle.net/yztJ8/5/
So, I have these h1 elements that are links and I want to add a class to them and fade that class in once the element has been hovered over, and then onMouseOut have the class removed, whilst fading the class. But using the fade function does nothing for me. Seeing as it hides the element. Any ideas?
jQuery(".categories h1 a").hover(
function () {
jQuery(this).fadeIn("slow").addClass("active");
},
function(){
jQuery(this).fadeOut("slow").removeClass("active");
});
});
Thanks!
EDIT:::
jQuery("h1").hover(function() {
jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
},function() {
jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
});
});
Try using jQuery UI .addClass and .removeClass.
$(function() {
$(".categories h1 a").hover(function() {
$(this).stop(true,true).addClass("active", 500);
}, function() {
$(this).stop(true,true).removeClass("active", 100);
});
});
DEMO (For some reason, it doesn't animate properly(fade) for the first time.. but then onwards it works fine)
Edit: Updated for completeness.
You can also use .animate to get the desired effect. See below,
$(function() {
$(".categories h1 a").hover(function() {
$(this).stop().animate({
backgroundColor: "#a7bf51"
}, 800);
}, function() {
$(this).stop().animate({
backgroundColor: "#FFFFFF"
}, 800);
});
});
DEMO
If you dont wanna use jquery UI because it will be an extra load, you can do the following :
(was useful to me when the 'hidden' bootstrap class is used in my app)
Fade In slowly while removing the class :
$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000)
Fade Out slowly, add the class and then fade back in:
$('.myClass').fadeOut(1000, function(){
$(this).addClass('hidden'); //or any other class
}).fadeIn(10000)
hope this will simplify someone's task!
Sounds like you want the styles of the class to fade in. You should look into animate() for that: http://api.jquery.com/animate/
fadeIn simply fades in the element.
I don't think you can cross fade between classes, but you can use the animate function. animate allows you to affect any css variable over a specified time.
http://api.jquery.com/animate/
I know that removes some styling from the css file, but again, I don't think jQuery will cross fade between classes.
If you have the jQuery UI library loaded, you can set an extra param for the toggleClass function.
Set your opacity's via css.
h1 a {
opacity:0.8;
}
h1 a.hovered {
opacity: 1.0;
}
then
jQuery(".categories h1 a").hover(function(e) {
$(this).toggleClass('hover', 1000);
}
The 1000 is the millisecond counter on the event. So the effect should fade to 1.0 opacity when hovered in a second and fade out in 1 second when not hovered.
Try this, and here's the jsFiddle (enter link description here) :
<script type="text/javascript">
jQuery(".categories h1").hover(function () {
jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800);
jQuery(this).addClass("active");
jQuery(this).find("a").fadeIn("slow");
},
function() {
jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800);
jQuery(this).addClass("active");
jQuery(this).find("a").fadeOut("slow");
});
</script>
<style type="text/css">
.categories h1 {
background-color: rgb(200, 200, 200);
display: block;
padding: 5px;
margin: 5px;
width: 100px
}
.categories h1 a {
display: none;
}
</style>
<div class="categories">
<h1>Item 1</h1>
<h1>Item 2</h1>
<h1>Item 3</h1>
</div>