What is the most effective approach to seamlessly conceal and reveal a button with the assistance

I have two buttons, one for play and one for pause.

<td>

    <?php

    if($service['ue_status'] == "RUNNING"){
        $hideMe = 'd-none';
    }


    ?>

    <a href="#" class="btn btn-warning btn-sm text-warning btn-pause-{{ $service['session_name'] }}" onclick="showModal('{{ $service['session_name'] }}', 'pause')"><i class="fa fa-pause "></i></a>


    <a href="#" class="{{ $hideMe }} btn btn-success btn-sm text-success btn-play-{{ $service['session_name'] }}" onclick="showModal('{{ $service['session_name'] }}', 'resume')"><i class="fa fa-play text-success"></i></a>



    <a href="/client-summary/{{ $service['session_name'] }}/graphs" class="btn btn-info btn-sm "><i class="fa fa-chart-area text-info"></i></a>


    <a href="#" class="btn btn-danger btn-sm " onclick="showModal('{{ $service['session_name'] }}', 'delete')">
        <i class="fa fa-trash text-danger "></i>
    </a>
</td>

Using jQuery

//changing the play button to a pause icon
var playBtn = $('#tr-' + sessionNameId).find('.btn-play-'+ sessionNameId);
var pauseBtn = $('#tr-' + sessionNameId).find('.btn-pause-'+ sessionNameId);

console.log(pauseBtn);
console.log(playBtn);

//fading out the play button and fading in the pause button
pauseBtn.removeClass('d-none');
playBtn.fadeOut();

Desired Outcome

The buttons appear to shift in and out smoothly. How can I achieve a smooth fade-out of the pause button and a fade-in of the play button?

What changes should I make in my code structure to accomplish this?

javascriptjqueryhtmlcsslaravel-blade

Answer №1

A useful approach would be to employ the 

playBtn.fadeOut('slow', callback);
method, enabling a more customizable functionality with 
playBtn.fadeOut('slow', function() { console.log('Fade Out Completed'); });
. Similarly, you may apply this technique to achieve the desired outcome using the fadeIn() method.

Answer №2

Altered some aspects to modify certain id's into classes, which may not be effective when it comes to modals, but you have the flexibility to manage that as per your preference. In order to demonstrate it properly, I had to make adjustments to the css and script tags. As it stands, one element is hidden immediately while the other fades in. There might be a way to overlap the effects, although it is uncertain if that is necessary. I believe that FadeIn and Out require Jquery UI, but there could be compatibility issues with that library.

$('.btn-play').on('click', function(e) {
$(this).prev().fadeIn('slow');
$(this).hide();
});

$('.btn-pause').on('click', function(e) {
$(this).next().fadeIn();
$(this).hide();

});

function showModal () {
}
a.btn-play{
  display:inline-block;
}
a.btn-pause{
  display:none;
}
i.fa {
  color:black !important;
}
.audiogroup {
  background:black;
}
.audiogroup td{
  padding:10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<table class ="audiogroup">

<tr >
<td>

<a href="#" class="btn btn-warning btn-sm text-warning btn-pause" onclick="showModal('1', 'pause')"><i class="fa fa-pause"></i></a>

<a href="#" class="btn btn-success btn-sm text-success btn-play" onclick="showModal('1', 'resume')"><i class="fa fa-play text-success"></i></a>

<a href="/client-summary/1/graphs" class="btn btn-info btn-sm"><i class="fa fa-chart-area text-info"></i></a>

<a href="#" class="btn btn-danger btn-sm " onclick="showModal('1', 'delete')"><i class="fa fa-trash text-danger"></i></a>

</td> 
</tr>
</table>

It is advisable to hide() first, although it appears to be working fine.

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

Trying to organize JSON data by multiple parameters using jQuery

Regarding the topic discussed in this thread; I have successfully managed to sort an Array of JSON Objects by two fields. Additionally, the discussion mentions: "To include additional columns for sorting, simply add them to the array comparison." // ...

jqueryjsonsorting

Utilize AJAX to submit a form in CodeIgniter efficiently

Is there a problem with submitting a form via Ajax? The form is not being submitted as expected and the Ajax function does not seem to be picking up the submit id. It is currently submitting in the usual way, but I need it to work through Ajax. Can anyon ...

phpjqueryajaxcodeigniter

Tips for getting rid of the excess space surrounding an image within a div tag

Placing images inside bootstrap card divs within col divs is my current challenge <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"& ...

csstwitter-bootstrap

Tips for creating a script that compiles all SCSS files into CSS within a Vue 3 project

Within my project, there exists a file named index.scss located in the src/assets/styles directory. Adjacent to this file are multiple folders housing SCSS files that are ultimately imported into index.scss. My objective is to devise a script within the pa ...

cssvue.jssass

What could be preventing me from exporting and applying my custom JavaScript styles?

This is my primary class import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import styles from './FoodStyles'; class Food extends Component { render () { return ( & ...

javascriptreactjsmaterial-ui

HTTP request in Angular with specific body content and custom headers

My goal is to access the sample API request from , as demonstrated in the documentation: curl -H "api-key: 123ABC" \ -H "Content-Type: application/json" \ -X POST \ ...

javascriptangularresthttp

What sets returning a promise from async or a regular function apart?

I have been pondering whether the async keyword is redundant when simply returning a promise for some time now. Let's take a look at this example: async function thePromise() { const v = await Inner(); return v+1; } async function wrapper() ...

javascriptasynchronousasync-await

Change the ng-model of the initial controller when a button is clicked in a separate controller

I am working on an AngularJS application that has two controllers. I am facing an issue where I need to update the ng-model of an input field in the first controller by clicking a button in the second controller. Accessing the $scope of the first controlle ...

javascriptangularjs

Tips for adding an animated box shadow in CSS without adjusting the shadow's direction

A unique box with a rotating animation was created, however, applying a box-shadow caused the shadow to also rotate along with the box. <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body{ displa ...

csscss-animations

Is it possible to view the CSS of a PDF file in print template mode using Chrome?

https://i.stack.imgur.com/XlcWm.png Currently facing an issue with debugging CSS on my PDF template. I am unable to inspect the styles directly in the CSS due to limitations. When using inspect element in Chrome, only the styles for text and elements are ...

htmlcssgoogle-chromefirefoxgoogle-chrome-devtools

Ways to conceal an element in Angular based on the truth of one of two conditions

Is there a way to hide an element in Angular if a specific condition is true? I attempted using *ngIf="productID == category.Lane || productID == category.Val", but it did not work as expected. <label>ProductID</label> <ng-select ...

javascripthtmlangulartypescript

Check whether the username variable is blank; if it is, then refrain from navigating to page2.php

Introducing meekochat, a live chat website where users can connect with others. To get started, simply input your name on page1.php and you'll be directed to page2.php for chatting. However, I have implemented a feature in my code to ensure that if th ...

phphtml

Animate the sliding of divs using the JavaScript animation function

I've designed some boxes that function similar to notifications, but now I want to smoothly slide them in from the left instead of just fading in. I know that I need to use .animate rather than .fadeIn to achieve this effect. The code snippet I&apos ...

javascriptjquerycssanimation

Trouble with reading from a newly generated file in a node.js program

Whenever I launch my results.html page, I generate a new JSON file and use express.static to allow access to the public folder files in the browser. Although my application is functioning properly, I find myself having to click the button multiple times f ...

javascripthtmljsonnode.jsexpress

Displaying a div on click using Jquery will only impact one div at a time

I am encountering an issue with my WordPress setup. Within my loop, I have a clickable link that toggles a div to show or hide content. However, since each item in the loop uses the same class, clicking on one link activates all of them simultaneously. &l ...

javascriptjqueryhtmlwordpress

Using Vue to perform multiplication on data table entries

Is there a way I can use Vue.js to multiply values in a table? The values provided are for 100g of the product. For example, if I input 200g, I would like the values to double: 318kcal, 12 fat, 48 carbs, 8 protein, and 2% iron. Similarly, inputting 50g sho ...

javascriptvue.jsvuetify.js

Implementation of Datatable Server-Side Using Json/Ajax Demonstrated Successfully, with CRUD functionality pending

Introduction: My current project involves using a server-side datatable.net JQuery plug-in with JSON, AJAX, and ssp.class.php. Although I have managed to get it working, I am facing challenges while trying to create buttons for editing and deleting entries ...

phpjqueryjsonajaxdatatable

Using AJAX to submit a form to a CodeIgniter 3 controller

I am working on adding a notification feature and need to run an ajax query through the controller when a button is clicked. Here's the script I'm using: $('#noti_Button').click(function (e) { e.preventDefault(); ...

javascriptajaxcodeigniter

What could be causing this Angular controller to throw the error message "Error: Unknown provider: nProvider <- n"?

Check out the jsFiddle code here: <div ng-app=""> <div ng-controller="FirstCtrl"> <input type="text" ng-model="data.message" /> {{data.message + " world"}} </div> </div> function FirstCtrl($scope) { ...

javascriptangularjs

PHP Calculator with Dynamic Calculations

I need to create an order form that updates the tax and total automatically once a quantity is entered into the text box. Should I use PHP or JavaScript for this functionality? Let's assume, for instance, that the tax rate is 0.3% My requirements: ...

javascriptphpjquery