Trouble ensues with integrating Magic CSS3 animations via jQuery due to malfunctioning

I've been experimenting with some magical CSS classes from a source I found online (http://www.minimamente.com/magic-css3-animations/) and trying to apply them using jQuery on mouseenter and mouseleave events. Unfortunately, it's just not working at all!

Here's the code snippet I've tried:

$(document).ready(function(){
    $('#banner-holder').on('mouseenter', function(){
        $(this).find('#prev, #next').addClass('magictime perspectiveLeft');
    });
    $('#banner-holder').on('mouseleave', function(){
        $(this).find('#prev, #next').removeClass('perspectiveLeft');
        $(this).find('#prev, #next').addClass('perspectiveLeftRetourn');
    });
});

The perspectiveLeft animation is triggered, but for some reason, the perspectiveLeftRetourn doesn't happen on mouse out. Have I overlooked something simple here?

jquerycssaddclassremoveclass

Answer №1

Check out this fiddle example

This code snippet seems to be working well:

$(document).ready(function () {
    var elements = $('#prev, #next');
    $('#banner-holder').on('mouseenter', function () {
        elements.removeClass('perspectiveLeftRetourn').addClass('magictime perspectiveLeft');
    });
    $('#banner-holder').on('mouseleave', function () {
        elements.removeClass('perspectiveLeft').addClass('perspectiveLeftRetourn');
    });
});

Update: Don't forget to consider removing the class perspectiveLeftRetourn on mouseenter.

Answer №2

$(document).ready(function(){
    $('#banner-holder').on('mouseenter', function(){
        $('#prev, #next').toggleClass('slideInRight');
    }).on('mouseleave', function(){
        $('#prev, #next').removeClass('slideInRight');
        $('#prev, #next').addClass('slideOutLeft');
    });
});

Let's try this approach instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The CSS filter "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80)" is not functioning properly in Firefox

Trying to apply a filter effect using CSS but encountering issues in Firefox: progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80 ) opacity: 0.5; -moz-opacity: 0.5; Any s ...

cssfirefox

jQuery: choose the nearest previous element from a child element

I'm facing a challenge with a button click functionality. I want the button to trigger a scroll action using scrollIntoView() to target a header tag located just above it (essentially 'scrolling to the top of this section'). However, without ...

jquery

Retrieving fresh CSS data from earlier animated elements within a Greensock timeline

In my code, I am using a TimelineLite() to perform a series of sequential tweens with .to(). What I want to achieve is accessing the output value from one of the early tweens in order to use it for constructing later tweens. Is there any way to retrieve t ...

javascriptjquerycssanimationgsap

What are the best ways to create a responsive login form?

After recently beginning to learn HTML and CSS, I have encountered some confusion. Take a look at this table design for screens under 500px, and then compare it to how it should appear on screens 500px or larger. I believe utilizing a media query may be t ...

htmlcssresponsive-design

Changing the Image Path According to the Device's Retina Ratio

I'm currently setting up a website for a photographer and working on creating a gallery. To streamline the process, I have automated many aspects such as file names, paths, widths, lightbox classes, etc. All I have to do in the HTML is write an <a ...

jquerycssretinaretina.js

Guide to extracting data from an XML file using AJAX

Here is the XML data I have: <resultitem> <itemname>Restaurant</itemname> <address>Some Road</address> <rating>4</rating> </resultitem> <resultitem> <itemname>Cafe</itemname> <address> ...

jqueryhtmlajaxxml

Save the LINQ query output as a JSON object and transfer it to JavaScript

I have a question regarding handling queries in ASP.NET 3.5 and converting them into JSON objects for use in JavaScript. Here's what I've done so far, but I'm not sure if it's the correct approach: List<NCDCPoint> dupli = (fr ...

jqueryasp.netajaxjson

checkbox toggling event triggering twice

I have been working on an application that allows users to register for university courses. They can select their registration type, course type, batch, and subjects. The subjects are displayed in a table based on the selected course type and batch. Users ...

javascriptjqueryhtmlajax

Using Express.js to serve simple SVG files (Technique involving Cheerio.js)

My goal is to manipulate SVGs before sending them through Express.js. The code snippet I am using is as follows: app.get("/iconic/styles/:style/:base/:icon", function (req, res) { var style = req.params.style; var base = req.params.base; var i ...

htmlcssnode.jsexpresssvg

Attempting to interpret HTML in Javascript

I have a text string that contains HTML tags. Initially, I attempted to insert this using innerHTML, but the tags were displayed as plain text. After some troubleshooting, I realized that I needed to properly parse the HTML content. Although jQuery prov ...

javascriptjqueryhtml

Trouble with displaying list bullets in jQTouch framework

I'm currently experimenting with jQTouch for a web app designed for iPhones. However, I am facing an issue where I want the content on the pages to display normal bullet lists instead of being styled as bars in the jqt theme. To achieve this, I am att ...

cssjqtouch

Dynamic Styling in Angular 2/4: A Modern Approach

Can someone help me with Angular 2/4 syntax for this code snippet? $('nav ul li a').click(() => { $(this).closest('li').addClass('active'); }); ...

jqueryangular

Preserving classes in JQuery after making AJAX requests

Before we proceed, it's important to note that I am unable to modify any of the existing calls, code, or functions. This means I must come up with a workaround solution. So, here's the situation: I have a form containing various fields and a dro ...

javascriptjqueryjsonajax

Can JavaScript be used to dynamically assign events to elements on a webpage?

I am currently using the following code: if ( $.support.touch == true ) { $(window).on('orientationchange', function(event){ if ( full == false ) { self.hideAllPanels("7"); } }); } else { $(window).on(&apo ...

javascriptjqueryeventsdynamicevent-handling

How can I eliminate the gap above the footer in iframes alignment?

I have a setup with four iframes: header, menuframe, bodyframe, and footer. The menuframe and bodyframe are positioned next to each other with space between the footer and the menuframe/bodyframe. How can I remove this space? Here is the CSS: iframe{ ...

cssiframe

What is the best way to apply a class to the initial div using jquery?

I have the following HTML code: <div class="main"> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> </div> <div class="main"> <div class="sub"></div> <di ...

jqueryhtml

Having trouble converting svg to png, thinking it might be due to discrepancies in svg elements

I am facing a puzzling issue where two different SVG elements are causing my JavaScript to work in one scenario but not the other. I have replaced the SVG elements in both examples, and surprisingly, only one works while the other does not. You can view th ...

javascriptjqueryhtmlcsssvg

Revamp the HTML table with JavaScript headers

I imported data from a CSV file into an HTML table and here is how it appears: <div id="myTable" style="-ms-overflow-x: auto;"> <table> <tbody> <tr class="rownum-0"> <td>Make</td> ...

javascriptjqueryhtmlcsv

javascript for accessing JSON data both forwards and backwards

I am attempting to implement Next/Previous buttons for a json array, but I am encountering difficulties in making it work. Here is my latest attempt: <div id="text"></div> <button name="prev">go to previous div</button> <but ...

javascriptjqueryarraysjson

Achieving perfect alignment both horizontally and vertically using CSS3's viewport height of 100%

I'm trying to utilize CSS3's Viewport Height to create a fullscreen section with a height of 100vh. However, I am encountering difficulties in centering elements both horizontally and vertically within the section. My goal is to have an image and ...

htmlcss