Jumping pictures using jQuery

Question

Jumping pictures using jQuery

I would like to create a bouncing effect for some images on my website.

$('#bbb').mouseenter(function() {
    $(this).stop().effect('bounce',500);
});
$('#bbb').mouseleave(function() {
    $(this).stop(true,true);
});
$('#target').mouseenter(function() {
    $(this).stop().effect('bounce',500);
});
$('#target').mouseleave(function() {
    $(this).stop(true,true);
});
$('#sears').mouseenter(function() {
    $(this).stop().effect('bounce',500);
});
$('#sears').mouseleave(function() {
    $(this).stop(true,true);
});

<div id="RegStores">
    <a href="http://www.bedbathandbeyond.com/regGiftRegistry.asp?wrn=-1824276933&amp;" target="_new"><img src="http://www.dkg2012.com/img/bbb.png" id="bbb" width="144" height="48" border="0" /></a>
    <a href="http://www.target.com/RegistryGiftGiverCmd?isPreview=false&amp;status=completePageLink&amp;listId=HCoY5fRCrcOOxRCdNn3i6g&amp;registryType=WD&amp;isAjax=false" target="_new"><img src="http://www.dkg2012.com/img/target.png" id="target" width="143" height="34" border="0" style="padding-left: 10px; padding-bottom: 5px;" /></a>
    <a href="http://www.sears.com/shc/s/GRManageView?storeId=10153&amp;catalogId=12605&amp;langId=&amp;externalId=900040792636010101&amp;grUserType=BUYER&amp;fwdURL=GRGuestRegistryView&amp;sortType=category" target="_new"><img src="http://www.dkg2012.com/img/sears.png" width="142" height="40" border="0" id="sears" style="padding-left: 10px;" /></a>
</div>

#RegStores {
    position:absolute;
    bottom:10px;
    left:23px;
    width:467px;
    height:50px;
    z-index:30;
}

Is there a way to implement this without causing the other images to shift downward? Also, when quickly moving the mouse over an image, it causes the image to continuously move upwards - any suggestions on how to resolve this?

jquery css

Answer 1

Answer №1

In my previous response, I mentioned that the animation involves adding display: block. It actually wraps the item to animate in a div instead of directly adding the display property. To address this issue, you can use

.ui-effects-wrap { display: inline-block; }

:

http://jsfiddle.net/d7UjD/46/

Keep in mind that this solution may only function correctly in browsers that support it, so utilizing floats as an alternative might be necessary. It's advisable to apply a more specific rule (e.g., wrapping everything in its own div) to avoid affecting other effects using the same class. Ideally, there should be a way in jQuery to modify the wrapper class as well.

UPDATE: In response to feedback from Good Guy Greg about not addressing all parts of the question, I have made further improvements here:

http://jsfiddle.net/d7UjD/47/

This update prevents the image from animating on hover while already in motion. While this approach works best for me personally, if you wish to halt the animation on mouse out or initiate it again on mouseover (which seems counterintuitive to me), different steps would need to be taken.

Answer 2

In my previous response, I mentioned that the animation involves adding display: block. It actually wraps the item to animate in a div instead of directly adding the display property. To address this issue, you can use

.ui-effects-wrap { display: inline-block; }

:

http://jsfiddle.net/d7UjD/46/

Keep in mind that this solution may only function correctly in browsers that support it, so utilizing floats as an alternative might be necessary. It's advisable to apply a more specific rule (e.g., wrapping everything in its own div) to avoid affecting other effects using the same class. Ideally, there should be a way in jQuery to modify the wrapper class as well.

UPDATE: In response to feedback from Good Guy Greg about not addressing all parts of the question, I have made further improvements here:

http://jsfiddle.net/d7UjD/47/

This update prevents the image from animating on hover while already in motion. While this approach works best for me personally, if you wish to halt the animation on mouse out or initiate it again on mouseover (which seems counterintuitive to me), different steps would need to be taken.

Answer 3

Answer №2

One solution has been implemented to improve the functionality of driving it to the top. This involves animating it back down to its original position on mouse out. Additional enhancements have also been made, such as switching to hover and adding a class to each link instead of using separate event binders for each.

http://jsfiddle.net/EcN2h/2/

$('.bounce').hover(function() {
    $('img', this).stop(true, true).effect('bounce', 500);
}, function() {
    $('img', this).stop(true, true) );
});

Answer 4

One solution has been implemented to improve the functionality of driving it to the top. This involves animating it back down to its original position on mouse out. Additional enhancements have also been made, such as switching to hover and adding a class to each link instead of using separate event binders for each.

http://jsfiddle.net/EcN2h/2/

$('.bounce').hover(function() {
    $('img', this).stop(true, true).effect('bounce', 500);
}, function() {
    $('img', this).stop(true, true) );
});

Answer 5

Answer №3

Here is a helpful tip that I thought would be better suited in this section rather than a comment.

$('#bbb,#target,#sears').on('mouseenter', function() {
    $(this).stop().effect('bounce', 500);
});
$('#bbb,#target,#sears').on('mouseleave', function() {
    $(this).stop(true, true);
});

You can make your code more concise with this approach.

Answer 6

Here is a helpful tip that I thought would be better suited in this section rather than a comment.

$('#bbb,#target,#sears').on('mouseenter', function() {
    $(this).stop().effect('bounce', 500);
});
$('#bbb,#target,#sears').on('mouseleave', function() {
    $(this).stop(true, true);
});

You can make your code more concise with this approach.

Jumping pictures using jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Vue.js: click event does not trigger transform animation

Is there a way to verify that input is not empty upon loading?

Adjusting the arrangement of div elements based on screen dimensions or orientation within an Ionic grid system

Creating void placeholders in a repeated loop

What is the most effective way to implement a CSS stylesheet on a particular individual element?

Troubleshooting Bootstrap's Horizontal Alignment Problem

Eliminate :hover effects from the :after elements' content

Having trouble adjusting the width of the text input in the inline search box form with an input group dropdown

What is the best way to incorporate a scroll bar into a table that updates dynamically?

Adjust the button's width as the text changes to create a dynamic animation

Vertically align all items within the div using Bootstrap to achieve perfect centering

Eliminate the text color from the navigation bar links

A design featuring two columns and a fixed footer

Problem with modals not triggering within the iDangero.us swiper

What is the best way to utilize jQuery toggle class for adding or removing elements?

Enhancing fancybox with dynamic scrollbars as the window size changes

Emphasize x-axis heading in a Highcharts graph

Building an array in PHP and retrieving values in JavaScript/jQuery: Tips for success

MUI provides the flexibility to adjust the opacity separately for Chip labels/icons and backgrounds

Making absolute positioning responsive in Bootstrap 4 - a comprehensive guide