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>
Related
In my web page I have an image that has a button positioned over it. I want to show and hide the button as mouse enter and leave the image:
$('#UserImage').mouseenter(function()
{
$('#ButtonChange').show();
}).mouseout(function()
{
$('#ButtonChange').hide();
})
It is working but as the button is contained inside the image when the mouse enters the button it is considered to leave the image so the button is hidden then at tha same moment as the button is hidden the mouseenter event is triggered again and the button is shown causing a flickering effect
any suggestion to solve this?
Edit:
$('#UserImage').mouseenter(function() {
$('#ButtonChange').show();
}).mouseout(function() {
$('#ButtonChange').hide();
})
.imageUser {
width: 150px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position:relative;width=150px">
<img ID="UserImage" class="imageUser" ImageUrl="~/Images/logo.jpg" />
<input type="button" ID="ButtonChange" Text="Change" style="position: absolute;top: 180px;height:25px;left:0px;width:100px;display:none">
</div>
The whole thing is also possible with pure CSS ! for such simple thing, you don't really need Jquery !
.imageUser {
width: 150px;
height: 200px;
}
.img-wrapper {
position: relative;
width: 150px
}
.img-btn {
position: absolute;
top: 180px;
height: 25px;
left: 0px;
right:0; /* gave right, to align the button in center */
margin:0 auto; /* as button as fixed width, margin aligns in center */
width: 100px;
display: none
}
.img-wrapper:hover .img-btn {display:block} /* whenever mouse hovers the image wrapper, the button is shown, other time, its hidden */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="img-wrapper">
<img ID="UserImage" class="imageUser" ImageUrl="~/Images/logo.jpg" />
<input type="button" ID="ButtonChange" Text="Change" class="img-btn">
</div>
Try hover?
$("#UserImage").hover(function () {
$('#ButtonChange').show();
}, function () {
$('#ButtonChange').hide();
});
I don't have an image so I make a div instead. See Fiddle below.
Fiddle: https://jsfiddle.net/9koswww1/1
Change mouseenter to mouseover.
https://api.jquery.com/mouseenter/
Check the bottom of the page for an example.
try this
$('#UserImage').mouseenter(function()
{
$('#ButtonChange').show();
}).mouseleave(function()
{
$('#ButtonChange').hide();
})
I have two divs with animation, both are doing the same but with different animation. I have
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle' });
});
});
Whole code in in jsfiddle http://jsfiddle.net/xLHb8/192/
Can anyone please explain to me why first div is animating right to left, left to right and second div is animating always to top left corner.
How can I make second div animate same as first div?
First, the relevant details in your code should be included in your question (in addition to providing the fiddle). But so you have the following CSS:
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second img {
max-width:100%;
max-height:100%;
}
.second {
width: 200px;
}
With the following HTML:
<button id="show_hide_button">click me</button>
<div id="some_box"></div>
<div class="second">
<img src="http://piq.codeus.net/static/media/userpics/piq_66223.png" />;
</div>
Note that you're setting the img to have a maximum width and height of its parent container. So because you're toggling the width of the parent, as parent collapses, the image is scaling down. Further, since you don't have a height setting on the img, its height is going to animate along with the animated width. This creates the effect of the image animating to the top left corner.
Without further details, it's hard to say how to fix your code to achieve the desired effect.
Update
If you want the width only to collapse, you can set a pixel height on your image so that it doesn't scale in proportion to its width:
.second img {
max-width: 100%;
height: 200px;
}
You can also put both animations in a single click event handler, like so:
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle'});
$('.second').animate({ width: 'toggle' });
});
});
Forked your fiddle: http://jsfiddle.net/u1sdd8j5/1/
Update 2
From the comments, it seems like you want the image to collapse to the left, without losing the aspect ratio. We need to get a little creative to pull that off, especially if you're looking for a solution involving jQuery.animate(). The image actually needs to move downwards as it is scaled down. We can pull that off by animating the <img> itself, rather than its container, and adjusting its top margin at the same time animate its width.
Revised CSS (making the containers the same size for consistency):
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second {
width: 25%;
height: 200px;
}
.second img {
max-width: 100%;
max-height: 100%;
}
Revised JS:
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle' });
var $secondImg = $('.second img'),
secondImgMargin = $secondImg.is(':visible') ? '50%' : 0;
$('.second img').animate({
width: 'toggle',
marginTop: secondImgMargin
});
});
});
Note that we need to first determine whether or not the <img> is visible. If it is, then we want to animate the top margin to 50%. If it's not, then switch the top margin back to 0.
Here's a new forked fiddle: http://jsfiddle.net/xwanm9ze/1/
Final Note
All of this might be easier to achieve with CSS3 transitions. You would want to set up a class that toggles the animation. And you can specify the transform-origin which, in this case, would be 'left center'.
The problem is, that you added a relative width and height attribute to the inside the second div and did not give a height and width attribute to the second div. This way, the image controls the height and width of the second div, since it has no height and width attribute.
In your case, a solution would be to give the second div a fixed width and height
Also, for the JQuery, you only need one $(document).ready function
$(document).ready(function () {
$('#show_hide_button').click(function () {
$('#some_box').animate({
width: 'toggle'
});
$('.second').animate({
width: 'toggle'
});
});
});
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second img {
width:100%;
height:100%;
}
.second {
width:200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="show_hide_button">click me</button>
<div id="some_box"></div>
<div class="second">
<img src="http://piq.codeus.net/static/media/userpics/piq_66223.png" />
</div>
Hi how may I make a simple mouse over animation to this logo?
What I want is the id logo may come down 300px and inside I will put my links as navigation
<body>
<div class="content">
<div id="logo"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/Google-Wallet-logo.svg/283px-Google-Wallet-logo.svg.png" alt="" /></div>
<h1 class="title">Hello Moto</h1>
</div>
</body>
FIDDLE
Use mouseenter and leave
A working example Fiddle where I move the text around on hover: http://jsfiddle.net/hzbRb/1/
$('#logo').mouseenter(function(){
$('.content > h1').css('marginTop','30px')
}).mouseleave(function(){
$('.content > h1').css('marginTop','0px')
});
modify this CSS
#logo {
background: #f8b133;
width: 200px;
height: 200px;
max-height: 500px !important; // this is critical!!
margin: 0 auto;
z-index: 1;
}
jQuery
$("#logo").on('mouseover', function () {
$("#logo").animate({
opacity: 0.95,
height: "+=300"
}, 250, function () {
// Animation complete.
// Show Navigation
});
});
$("#logo").on('mouseleave',function () {
// Hide Navigation
$("#logo").animate({
opacity: 1,
height : "-=300"
}, 250, function() {
});
});
I gave it a little opacity so your navigations might show up a bit better and you'll notice I use the .one() delegation so it doesn't continue to move down every time you mouseover.
AFTER EDIT Animations will run a bit faster now and you'll have the ability to hover and leave as many times as is needed rather than being limited to once, as long as you change the CSS.
working jsFiddle
I'm trying to achieve the effect of a sliding div using the jquery animate option. I'm able to "slide" the parent div up but I'm having issues with showing the div behind the slider.
I've created this jsfiddle to show my issue.
Try uncommenting the photoOptions div. I'm trying to hide this div so it's only revealed when the parent div is slid up.
<div class="photoWrapper">
<!-- <div class="photoOptions"> This is your data. </div>-->
<div class="photoHolder">
Image Here
</div>
<div class="photoMeta">More data here</div>
<div class="photoCredits">
Trigger
</div>
</div>
Code
jQuery.fn.blindToggle = function(speed, easing, callback) {
var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
return this.animate({
marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h
}, speed, easing, callback);
};
$(document).ready(function(){
$(".trigger").click(function(){
$('.photoHolder').blindToggle('slow');
});
});
Current CSS:
.photoWrapper {
width:200px;
border: solid 1px #ddd;
}
.photoHolder {
border: solid 1px #eee;
width:200px;
height:266px;
}
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
}
Any thoughts on how I can achieve this?
The browser renders elements based on there place in the DOM, if an element preceeds another element in the dom, it is rendered under it.
To change this default behaviour, you should use the CSS rule z-index, by defining a lower z-index on your .photoOptions div, it will be rendered below it.
as seen in this fiddle
Also be aware that z-index values may be handled differently for elements that are positioned absolute, due to the fact that they are not rendered in the normal flow.
Using the callback on .blindToggle() can achieve that effect but you're going to have to edit your CSS so that .photoCredits is visible and just start off with .photoOptions hidden:
$(document).ready(function () {
$(".trigger").click(function () {
$('.photoHolder').blindToggle('slow', function () {
$(".photoOptions").show();
});
});
});
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
display:hidden;
}
**** The truth is all these solutions work, just not with the project so I will re-pose the question, slightly differently ****
Essentially I have an image, which when someone moves their mouse cursor over it, it displays a div (which contains an image - aka play button). When they move they're cursor outside of the image, the play button disappears.
It works but if you move the curse over the play button it flickrs like mad, hence I must have my events mixed up somehow..
Thanks in advance for any help...
HTML
<div id="cont">
<div id="art" style= "position: absolute; left: 20px; top: 40px;">
<img src="http://www.newmusicproducer.com/img/ic_play.png">
</div>
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" alt="smile" id="imgSmile"></img>
jQuery
$(document).ready(function() {
$('#art').hide();
$('#imgSmile').mouseenter(function() {
$('#art').show();
});
$('#imgSmile').mouseleave(function() {
$('#art').hide();
});
});
Here's a fiddle
This same effect could be achieved using just CSS:
<div>
<img src="http://www.newmusicproducer.com/img/ic_play.png">
</div>
div
{
background-image:url('https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275');
width:100px;
height:100px;
position:relative;
}
div a
{
position:absolute;
top:20px;
left:30px;
display:none;
}
div:hover a
{
display:block;
}
-- SEE DEMO --
EDIT: In case you need to use this multiple times on the same page with different link URLs, I've made a version which requires minimal HTML using a bit of jQuery to apply the rest:
<div class="play kirkbridge" data-playUrl="/myPlayUrl"></div>
http://jsfiddle.net/tW68d/16/
This might be a bit overkill though, it depends on your usage.
The problem is mousing over the new image is causing mouseout on the original. Try using hover() instead, along with both elements as the selector.
$(document).ready(function() {
$('#art').hide();
$('#imgSmile, #art').hover(
function() {
$('#art').show();
}, function() {
$('#art').hide();
}
);
});
Updated fiddle
Here's an alternative approach:
http://jsfiddle.net/aramk/ZqVZ6/1/
$(document).ready(function(){
var art = $('#art');
art.hide();
var updatePlayButton = function() {
if (art.is(':visible')) {
art.hide();
} else {
art.show();
}
}
$('#cont').hover(updatePlayButton);
});
I'd use a wrapping DIV, since when the button overlaps the smile image and your mouse is over it you lose focus from the smile image and it starts flashing. This will avoid that.
can be done using CSS too, if thats a posibility.
here is the fiddle http://jsfiddle.net/xasy4/
<div id="imgSmile">
<div id="art">
<a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png">
</a>
</div>
</div>
the css
#imgSmile
{
background: url('https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275') no-repeat center Transparent;
width: 100px;
height: 100px;
}
#imgSmile > #art
{
position: absolute; left: 20px; top: 40px; opacity: 0;
}
#imgSmile:hover > #art
{
position: absolute; left: 20px; top: 40px; opacity: 1;
}
You can use the .on() method, than set both element as selectors and use an event (e) checker like:
demo jsBin
$(document).ready(function(){
$('#art').hide();
$('#imgSmile, #art').on('mouseenter mouseleave',function(e){
if(e.type === 'mouseenter'){
$('#art').show();
}else{
$('#art').hide();
}
});
});
What I like the most is the use of the Ternary operator like:
$('#imgSmile, #art').on('mouseenter mouseleave',function(e){
var et = e.type === 'mouseenter' ? $('#art').show() : $('#art').hide();
});
Demo with ternaly operator
You can use in your exact case just the .toggle() method:
$('#imgSmile, #art').on('mouseenter mouseleave',function(e){
$('#art').toggle();
});
demo with .toggle()
http://jsfiddle.net/jqkBx/1/
Why dont you just use CSS for hover effects?
HTML
<div id="wrapper">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" alt="smile" id="imgSmile" />
<div id="art" style="position: absolute; left: 20px; top: 40px;">
<img src="http://www.newmusicproducer.com/img/ic_play.png" />
</div>
</div>
CSS
#art{
display:none;
}
#wrapper{
width:100px;
height:100px;
}
#wrapper:hover #art{
display:block;
}
$(document).ready(function() {
$('#art').hide();
$('#imgSmile').mouseenter(function() {
$('#art').show();
});
$('#art').mouseenter(function() {
$('#art').show();
});
$('#imgSmile').mouseleave(function() {
$('#art').hide();
});
});
just add #art mouse enter event