"Stuck: CSS Div Transition Effect Refuses to Cooper

I am looking to incorporate a transition on my div when it is clicked. I've tried using jQuery with this example: http://jsfiddle.net/nKtC6/698/, but it seems to not be working as expected. So, I want to explore another example using CSS: http://jsfiddle.net/nKtC6/690/

Here is the issue in my JS:

$(function() {                       
  $("#icon").click(function() {
    $("animate1").removeClass("animate1-nomove").addClass("animate1-move");      
    $("animate2").removeClass("animate2-nomove").addClass("animate2-move");  
  });
});

And here is the CSS:

.animate1-nomove {left: -100px;}
.animate2-nomove {left: 0px;}

.animate1-move {left: 0px;}
.animate2-move {left: 150px; background-color: red;}

Is it possible to achieve this effect using JavaScript? I prefer a CSS3 solution over jQuery animate for this.

jquerycss

Answer №1

It's important to remember the class selector in your jQuery code, like $(".animate1") and $(".animate2"), instead of just $("animate1") and $("animate2").

Answer №2

Your selectors are causing a syntax error within the #icon.click callback function because you forgot to include the dots for the classes:

$("animate1").removeClass("animate1-nomove").addClass("animate1-move");
$("animate2").removeClass("animate2-nomove").addClass("animate2-move");  
// should be
$(".animate1").removeClass("animate1-nomove").addClass("animate1-move");     
$(".animate2").removeClass("animate2-nomove").addClass("animate2-move");

As a solution, here's a functional demonstration using the click event instead of hover:
http://jsfiddle.net/ghJk9/

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

What is the best way to extract text from a dynamically changing element using jQuery?

I've been struggling with a coding issue. Despite trying numerous approaches, I keep encountering the same problem where every new button I add ends up having the same text or, alternatively, nothing seems to work as expected. $j serves as my variabl ...

javascripthtmljquerynext.js

Overlaying a div on top of an iframe

Struggling to make this work for a while now. It seems like a small issue related to CSS. The image isn't overlaying the IFrame at the top of the page as expected, it's going straight to the bottom. Here is the code snippet: .overlay{ width: ...

javascriptjqueryhtmlcssiframe

The Kendo Grid is refusing to show up within the popup window

I am new to using Angular 2 and Kendo UI. Currently, I am attempting to include a grid inside my pop-up window. While I have successfully displayed the pop-up, adding the grid has proven challenging. The grid is not appearing as expected ...

javascripthtmlcssangularkendo-ui

Is using transform scale in CSS to scale SVG sprites a valid method of scaling?

I have been using an SVG sprite as a CSS background image in this manner: .icon-arrow-down-dims { background: url("../sprite/css-svg-sprite.svg") no-repeat; background-position: 16.666666666666668% 0; width: 32px; height: 32px; display: inline-b ...

htmlcsssvg

The presence of double quotes in stringified JSON is undesired

I am currently working on a weather forecasting website where the API returns pure JSON data. However, when I convert this data to a string and add it to an element in order to display it on the webpage, I encounter a problem with double quotes appearing. ...

javascriptjqueryhtmljsonstringify

IOS Troubleshooting: Ineffectiveness of the Transform

So I am encountering a slight issue while trying to incorporate this code on iOS because I am not familiar with how iOS operates. On my website, I have implemented a circle that works perfectly fine on browsers and Android devices. However, when it comes t ...

ioscsstransform

When hovering over a hyperlink, an image appears but I want to adjust the image's position in relation to each link

I have a unique feature on my website where text hyperlinks reveal small thumbnail images when hovered over. This concept was inspired by an example I found on this page. I initially implemented the code from a post on Stack Overflow titled Display Image O ...

htmlcssimagehyperlinkhover

Next.js is causing me some trouble by adding an unnecessary top margin in my index.js file

I started a new project using next.js by running the command: yarn create next-app However, I noticed that all heading and paragraph tags in my code have default top margins in next.js. index.js import React, { Component } from "react"; import ...

javascriptcssreactjsnext.jsjsx

Bootstrap 4's form validation feature is malfunctioning

link to plunker Here's what I'm looking to achieve. I am currently using Bootstrap 4 for my website. Specifically, I have a basic contact form that I am attempting to enhance with tooltip validation. Unfortunately, the form validation is not ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to extract just the JSON data from res?

While creating a search functionality to display a list of users, I encountered an error when attempting to load additional pages to show more users: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data var result = JSON.pars ...

phpjqueryajaxjson

Guide on generating a JSON dataset by combining two arrays and sending it back to an AJAX request

key:[id,name,address] value:[7,John,NewYork] I would like to generate a JSON object similar to {"id": 7, "name": "John", "address": "NewYork"} using a for loop, and then send it back to ajax $.ajax({ //what should be ...

javascriptjqueryarraysjsonajax

The issue with WooCommerce's update_checkout function is that it is not properly updating the available shipping methods

My WooCommerce site includes a function that adds a 4€ fee when the cash on delivery payment method is selected: add_action('woocommerce_cart_calculate_fees', 'increase_cod_cost'); function increase_cod_cost() { if(WC()->sessio ...

phpjqueryajaxwordpresswoocommerce

Box Pattern with Pop-Up Modal

Check out the grid of squares I've coded below: <div class='square-container'> <div class='square'></div> <div class='square'></div> <div class='square'></div& ...

javascriptjqueryhtmlcss

Reorganizing the layout of grid items

Currently, I am working on a task involving GRID CSS. The main objective of the task is to utilize GRID specifically, rather than other methods like flex. I have successfully set up two columns in my GRID, each with its own divs. However, what I am struggl ...

htmlcssgridcss-grid

WebApp specifically designed for iPads that mimics the functionality of a swipe

I am in the process of developing a full-screen web application for an iPad that will showcase a series of images in a slider format. The users should be able to swipe between the images and click on one to view it in detail. Below is an example showcasin ...

javascriptjqueryipad

Choose the radio button by clicking using jQuery

I am attempting to use jQuery to select a radio button on click. Despite multiple attempts, I have been unsuccessful so far. Here is my current code: JS $(document).ready(function() { $("#payment").click(function(event) { event.preventDefault() ...

javascriptjqueryruby-on-rails

Troubleshoot jQuery in an ASP.NET application

Is there a way to intercept the jQuery function call in my Web app that displays a <div>? I want to identify exactly what triggers the appearance of that <div>. I am looking to display the same div using a different button, but the original bu ...

c#jqueryasp.net

The functionality of using variables in conjunction with the .insertAfter method appears to be

As a novice coder with limited English skills, I apologize in advance. Here is the CSS code snippet I am working with: #wrapper{ width: 200px; height: 300px; border: solid 1px #000; overflow: visible; white-space: nowrap; } .page{ ...

jquerycsshtmlvariablesinsertafter

A Comprehensive Guide to Transmitting Variable Value Image Files using Ajax and PHP

I am currently exploring the integration of PHP and AJAX to facilitate image uploads into a designated folder, along with passing values from textboxes and textarea elements. <!DOCTYPE html> <body> <span id="msg" style="co ...

phpjqueryajax

When using PHP's `json_encode()`, don't forget to append a "1" at the

While utilizing json_encode in my project, I have encountered an issue that is perplexing. On one particular page where I make an ajax call, the resulting json seems to mysteriously add a 1 to the end of the string. The output of my return string appears ...

javascriptphpjqueryajaxjson