I am trying to get a simple hover effect with jQuery on an image.
What I want to get eventually is a green hovering effect, with a text appearing along with the color. I don't know if I'm being clear.
For now, I just want the simple color hover effect to work.
Here is what I did first:
$("img").hover(
function() {
wid = $(this).width();
hei = $(this).height();
$("<div id='hover'></div>").insertBefore(this);
$("#hover").css({
"background-color": "rgba(60,147,138,0.2)",
"width": wid,
"height": hei,
"z-index": "3",
"position": "absolute"
});
},
function() {
$("#hover").remove();
}
);
That code there is generating an empty div on top of my image with a transparent green background, to get that green hover effect. But it doesn't work great, and my guess is that the mouse is not on the image anymore, but on that div that has appeared just above it.
So I tried this then:
$("img").mouseenter(
function() {
wid = $(this).width();
hei = $(this).height();
$("<div id='hover'></div>").insertBefore(this);
$("#hover").css({
"background-color": "rgba(60,147,138,0.2)",
"width": wid,
"height": hei,
"z-index": "3",
"position": "absolute"
});
}
);
$("#hover").mouseleave(
function() {
$(this).remove();
}
);
The hover effect is stable as I expected, but the mouseleave event just doesn't work.
I don't know what to do.
Any help would be appreciated!
Edit: Oh, and here is the JSFiddle, just in case
A small digression first...
what you're trying to do can be easily done using CSS only and the :hover pseudo
.imgWrapper,
.imgWrapper img{
position:relative;
display:inline-block;
vertical-align:top;
}
.imgWrapper span{
position:absolute;
z-index:1;
top:0; bottom:0; left:0; right:0;
background:rgba(60,147,138,0.2);
padding:24px;
text-align:center;
color:#fff;
opacity:0;
transition: 0.3s;
font-size:2em;
}
.imgWrapper:hover span{
opacity:1;
}
<span class="imgWrapper">
<img src="http://lemagcinema.fr/wp/wp-content/uploads/2014/11/alain_delon_59055-1024x768-500x372.jpg" width="300">
<span>This is an<br>image caption!</span>
</span>
To answer your jQuery question
$("#hover").mouseleave(
at the time you're assigning that function there's no #hover element on the page.
this would do it:
$("img").mouseenter(function() {
var wid = $(this).width();
var hei = $(this).height();
$("<div id='hover' />").insertBefore(this);
$("#hover").css({
"background-color": "rgba(60,147,138,0.2)",
"width": wid,
"height": hei,
"z-index": "3",
"position": "absolute"
}).mouseleave(function() {
$(this).remove();
});
});
or even better you don't need the #ID at all: https://jsfiddle.net/q5r3a00x/5/
$("img").mouseenter(function() {
var wid = $(this).width();
var hei = $(this).height();
$("<div />", {
insertBefore : this,
mouseout : function(){
$(this).remove();
},
css : {
backgroundColor: "rgba(60,147,138,0.2)",
width: wid,
height: hei,
position: "absolute"
}
});
});
Related
I have a card layout that looks like this: https://image.prntscr.com/image/AOyf0PwmQDWtJwqf_r4ckA.png
With the help of this code I going to extend the card when I press "Show Details" but I can't seem to change the time the animation runs OR sync the finished function to when it's actually done. It triggers halfway of the way the height animation has happen.. what am I doing wrong?
Here is the jquery code:
$(document).ready(function () {
var block;
var pTag;
$(".showFullCard").click(function () {
block = $(this).parents(".roadmap-block");
$(this).toggle(function () {
$(block).animate({
height: "400px"
}, 200);
$(block).css({ "position": "relative", "z-index": "1" })
}, function () {
$(block).animate({
height: "700px"
}, 200);
$(block).css({ "position": "absolute", "z-index": "2" })
});
});
$(document).click(function (event) {
if (!$(event.target).closest(block).length) {
$(block).animate({
height: "400px"
}, 200, function(){
$(block).css({ "position": "relative", "z-index": "1" })
});
}
});
});
Please add the HTML markup so we can test the code.
one option that might be easier is to create a CSS class with transition and toggle that class using :
$(document).ready(function(){
$("showFullCard").click(function(){
$(this).toggleClass('yourClass');
});
});
CSS:
.yourClass {
height:600px!important;
width:200px;
padding 100px;
transition: all .5s ease;
}
.roadmap-block{
width:400px;
height:400px;
background:#ccc;
padding:20px;
transition: all .3s ease;
}
Is there any way of keeping border size fixed while scaling an object with CSS ?
I have an object with style below
.myObj{
width:100px;
height:100px;
border:1px solid red
}
when I scale this object the border of this object also scales as normal.But how can I keep it at 1px?
Here is the FIDDLE
I believe you'd have to transition the width and height ( and whatever else you need ) instead of using scale.
.box {
transition: 1s;
}
.box:hover {
width: 200px;
height: 200px;
}
http://jsfiddle.net/GJJp4/65/
This problem could however be solved using CSS3 properties only.
But, this would only be possible if you give a 'border-width' of '2px' at first and then change it to '1px' as you hover over it as 1px is the smallest unit value to render with.
.myObj { border: 2px solid red; }
.myObj:hover { border: 1px solid red; }
Here goes the FIDDLE for better understanding.
Try this fiddle
$(".box").hover( function () {
$( ".box" ).animate({
width: "300px",
height: "300px"
}, 100, function() {
// Animation complete.
});
}, function () {
$( ".box" ).animate({
width: "75px",
height: "75px"
}, 100, function() {
// Animation complete.
});
});
Of course it is possible! I think the easiest way is to change your jQuery code and use the .animate-function instead of the .transition-function:
$(".box").hover( function () {
$('.box').animate({height: 300, width: 300, marginLeft: '-=' + (300-75) / 2, marginTop: '-=' + (300-75) / 2});
}, function () {
$('.box').animate({height: 75, width: 75, marginLeft: '20%', marginTop: '20%'});
});
With a little bit of creativity you'll have the same effect with a thin border ;)
http://jsfiddle.net/GJJp4/71/
Im late to this answer, but I hope it helps. When using css scale, dimensions also scale. You can override this using jQuery (or javascript if you will)
var scale = 0.5, /*value of your scale, as in transform: scale(0.5)*/
absoluteSize = 1/scale + "px"
//absoluteSize = 1/0.5px = 2px
$(".box").css("border", absoluteSize);
This is pure math
1/0.5 = 2
1 = 2(0.5)
1 = 1
I am making a website where I am placing an "ad" which I want to hide under the container div, but you can still see the tip of it. when you take your cursor over it I want it to smoothly come out from underneath the container. And when you remove the cursor i would want it to go back to it`s first position under the container. Anyone know a simple css, a jquery, or a javascript I can use?
Thanks!
Edit
Thanks for all the responses!
I am sorry if I just didn't get it, or if I was a bit unclear in my question, but i want the image to smoothly move horizontally from behind the my container on the right side to where my background is. so I want it to move and not just pop right out. So i basically want my picture to smoothly move back and fourth from underneath the container. When I place the cursor over the tip of the picture i want it to slowly move out from it's position under the container, and when i let go i want it to slowly go back. I see now that my title was a bit misleading, I'm sorry.
Hope someone can help me!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$("#demo").on({
mouseenter: function() {
var str = "background-color:red; height: 100px; width: 100px";
$(this).attr("style", str);
},
mouseleave: function() {
var str = "background-color:red; height: 10px; width: 10px";
$(this).attr("style", str);
}
});
});
</script>
<div id="demo" style="background-color:red; height: 10px; width: 10px"> <br/><br/><br/></div>
Use jQuery hover method:
$("#demo").hover(
function() {
$(this).css({'background-color', 'red'}).height(100).width(100);
},
function() {
$(this).css({'background-color', 'red'}).height(10).width(10);
}
);
This was fun
Live Demo
Script
$(function() {
$("#demo").on({
mouseenter: function () {
$(this).css({
"height": "100px",
"width": "100px"
});
},
mouseleave: function () {
$(this).css({
"height": "10px",
"width": "10px"
});
}
});
});
CSS
#demo {
background-color:red;
height: 10px;
width: 10px;
position:absolute;
top:100px;
left:100px;
overflow:hidden;
}
#main {
background-color:yellow;
height: 100px;
width: 100px;
position:absolute;
top:5px;
left:5px;
}
HTML
<div id="demo">This is an ad</div>
<div id="main">Here is a div</div>
I thought this ought to be a straightforward thing to do, but I don't see a clear way to do it.
I would like to make it so that when a user hovers the mouse over an image, the image becomes 10% bigger and then returns to its original size when the user moves the mouse away.
I think that I will want to use the jQuery hover function, but I don't know what functions to pass into hover.
$('.resizableImage').hover(makeBigger, returnToOriginalSize);
jQuery lets you use += and %. So those two together will do what you want.
$('.resizableImage').hover(makeBigger, returnToOriginalSize);
function makeBigger() {
$(this).css({height: '+=10%', width: '+=10%'});
}
function returnToOriginalSize() {
$(this).css({height: "", width: ""});
}
DEMO: http://jsfiddle.net/rZaAE/
You could do it with CSS3 tranform property, for example
$('.resizableImage').hover(function(){
$(this).css("transform", "scale(1.1, 1.1)");
}, function(){
$(this).css("transform", "none");
});
Without CSS3 you could simply get original size using .width() and .height() methods, store it in data attribute(s) and resize. On mouseout just restore the original values.
var hoverRatio = 1.1;
$('.resizableImage').hover(function() {
$(this).data('width', $(this).width());
$(this).data('height', $(this).height());
$(this).css({
width: $(this).width() * hoverRatio,
height: $(this).height() * hoverRatio
});
}, function() {
$(this).css({
width: $(this).data('width'),
height: $(this).data('height')
});
});
See the DEMO.
You should use stop on the animation also so it doesn't get interrupted when the user moves out before the animation has finsihed
html:
<img src="http://placehold.it/350x150" class="resizableImage" width="350" height="150" />
js:
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
Here is a fiddle:
http://jsfiddle.net/tWdAK/1/
Couldn't you just do this with css:
CSS
.resizable_img {
position: relative; // needed for z-index to work
width: 100%;
height: auto; // will resize image proportionally
}
.resizable_img:hover {
width: 120%;
z-index: 1; // place image on top
}
.img_container {
width: 25%;
position: relative;
overflow: visible; // stops images being shifted
float:left;
}
HTML
<div class="contents">
<div class="img_container">
<img class="resizable_img" src="img.jpg">
</div>
</div>
Fiddle here
If you're not using inline styling, you can omit saving the old values in data and use style attr instead.
$('.element').hover(function() {
var el = $(this);
el.attr('style','width:'+el.width() * 1.1 + 'px;height:'+el.height() * 1.1 + 'px;');
}, function() {
$(this).removeAttr('style');
});
In order to highlight a certain p element, I've written some JS to make it appear above a darkened background.
In order to do this, I used jQuery to create an overlay, and then clone the information p element and absolutely positioned it over the overlay.
Because it dropped a few CSS properties (not being inherited because of the new position in the page), I used jQuery to add them.
It works almost perfectly. In my Firefox 3.5.6 on Mac OS X, when it fades away, there is a slight disrepencacy of a matter of pixels. I know it's nitpicking, but I'd love to have it disappear and the end user not know the difference.
The test is available here: https://www.ikatanspa.com/book-online/?test
Here is the jQuery function too
var highlightFormSuccess = function() {
var fadeTo = 0.6;
var $info = $('p.information');
if ($info.length) {
// make overlay
var $overlay = $('<div />')
.css({
display: 'none',
width: '100%',
height: $(document).height(),
position: 'absolute',
top: 0,
left: 0,
zIndex: 32767,
opacity: 0
})
.attr({
id: 'overlay'
})
.appendTo('body');
// pull out success block and position above overlay
var left = $info.position().left,
top = $info.position().top,
fontSize = $info.css('font-size'),
width = $info.width(),
color = $info.css('color'),
lineHeight = $info.css('line-height');
var $newInfo = $info.clone()
.css({
position: 'absolute',
top: top,
left: left,
'font-size': fontSize,
'line-height': lineHeight,
width: width,
color: color,
zIndex: 32767
})
.appendTo('body');
$overlay
.show()
.fadeTo(1000, fadeTo);
// wait then fade back out
setTimeout(function() {
$($overlay, $newInfo).fadeOut(1000, function() {
$newInfo.fadeOut(250, function() { $(this).remove(); } );
});
}, 2500);
};
};
Perhaps you can make things a bit easier. I just replicated the desired effect by setting my paragraph rules to:
p.highlight {
position:relative;
background-color:#ffffff;
z-index:10;
}
And my overlay to:
div.overlay {
position:fixed;
background-color:#000000;
z-index:5; // lower than my paragraph, higher than all else
top:0; left:0; width:100%; height:100%;
}
--
<body>
<div class="overlay"></div>
<p>I'm a paragraph.</p>
<p class="highlight">I too am a paragraph.</p>
</body>