Изменить стиль кнопки на jQuery slide toggle

У меня есть функция обратного вызова в моем проекте.Изменить стиль кнопки на jQuery slide toggle

Могу ли я изменить стиль кнопки?

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".slide-toggle").click(function(){ 
      $(".box").animate({ 
       width: "toggle" 
      }); 
     }); 
    }); 
</script> 
</head> 
<body> 
    <button type="button" class="slide-toggle">Callback</button> 
    <div class="box"> 
     <div class="box-inner">Lorem</div> 
    </div>

Спасибо!

источник

2016-02-17 Maksim Medvedev

изменить что? Чего? В чем? :) – guradio

Изменить цвет, шрифт и фон)) –

почему бы не добавить класс в элемент и переключить класс на изменение стиля – guradio

$(document).ready(function(){ 
    $(".slide-toggle").click(function(){ 
     $(".box").animate({ 
      width: "toggle", 
      color: '#f00', 
      background: '#00f' 
     }); 
    }); 
});

или, как упоминалось в комментариях нам класс

<style> 
    .your_class { 
     color: #f00; 
     background: #00f; 
    } 
</style> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".slide-toggle").click(function(){ 
      $(".box").animate({ 
       width: "toggle" 
      }).toggleClass('your_class'); 
     }); 
    }); 
</script>

(и в следующий раз использовать правильные теги)

источник

2016-02-17 08:54:09 Nergal

Вы можете использовать JQuery функцию toggleClass, чтобы добавить/удалить класс элемент. Таким образом, ваш код будет чистым, и вы сможете использовать те же анимации везде в своем коде и можете легко их модифицировать.

См. Пример ниже. В текущем примере мы добавляем класс skin к элементу окна при нажатии кнопки. Вы можете изменить класс skin, как вам нравится. Я также добавил класс box-transition, чтобы сделать анимационный эффект, вы также можете отредактировать, как вы хотели бы, я рекомендую проверить this.

$(function(){ 
 

 
    $('.slide-toggle').on('click', function(){ 
 
    $(this).toggleClass('active'); 
 
    $('.box').toggleClass('skin'); 
 
    }); 
 

 
});

.box{ 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #f34; 
 
} 
 

 
.box-transition{ 
 
    -webkit-transition: all 500ms ease-out; 
 
    -moz-transition: all 500ms ease-out; 
 
    -o-transition: all 500ms ease-out; 
 
    transition: all 500ms ease-out; 
 
} 
 

 
.skin{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
} 
 

 
.active{ 
 
    background: #ccc; 
 
    color: #fff; 
 
    border: none; 
 
    outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button type="button" class="slide-toggle">Callback</button> 
 
<div class="box box-transition"> 
 
    <div class="box-inner">Lorem</div> 
 
</div>

источник

2016-02-17 09:04:31 Timo

Изменить стиль кнопки на jQuery slide toggle

ответ

Смежные вопросы