Как открыть панель в% слева с помощью jquery?

0

Я открываю левую панель "300 пикселей", но мне нужно открыть левую панель на 80% от ширины. не могли бы вы рассказать мне, как левая панель не в px в%.

Я хочу открыть панель шириной около 80%.

http://jsfiddle.net/eHded/4/

.panel {
    width:300px;
    float:left;
    height:550px;
    background:#d9dada;
    position:relative;
    left:-300px;

}
.slider-arrow {
    padding:5px;
    width:10px;
    float:left;
    background:#d9dada;
    font:400 12px Arial, Helvetica, sans-serif;
    color:#000;
    text-decoration:none;
    position:relative;
    left:-300px;
}
  • 0
    jsfiddle.net/Palestinian/eHded/1675 использовать 80% , просто? Также обратите внимание, что это не связано с jQM, так как вы не используете jQM.
  • 0
    ">>" изображение ушло куда-то еще. как закрыть эту панель ... пожалуйста, проверьте, откройте панель и изображение куда-то ушло
Теги:

2 ответа

0
Лучший ответ

JSFiddle:

http://jsfiddle.net/eHded/1676/

CSS:

.panel {
    width:80%;
    left:-80%;

}
.slider-arrow {
    left:-80%;
}

И JS:

$('.slider-arrow').click(function(){
    var newWidth = $(this).parent().width() * 0.8;

    if($(this).hasClass('show')){        
    $( ".slider-arrow, .panel" ).animate({            
      left: "+=" + String(newWidth)
      }, 700, function() {
        // Animation complete.
      });
      $(this).html('«').removeClass('show').addClass('hide');
    }
    else {      
    $( ".slider-arrow, .panel" ).animate({
      left: "-=" + String(newWidth)
      }, 700, function() {
        // Animation complete.
      });
      $(this).html('»').removeClass('hide').addClass('show');    
    }
});

Вы найдете ширину parent(), получаете 80% от этого и используете это в своих анимациях вместо заданной величины px.

  • 0
    ">>" изображение ушло куда-то еще. как закрыть эту панель, такого нет
  • 0
    @SajadLfc Кажется, мы работали над этим одновременно, но никто не скопировал ваш ответ. Если вы посмотрите, они разные.
Показать ещё 4 комментария
1

пытаться

FIDDLE DEMO

CSS

.panel {
    width:80%;
    float:left;
    height:550px;
    background:#d9dada;
    position:relative;
    left:-80%;

}
.slider-arrow {
    padding:5px;
    width:10px;
    float:left;
    background:#d9dada;
    font:400 12px Arial, Helvetica, sans-serif;
    color:#000;
    text-decoration:none;
    position:relative;
    left:-80%;
}

JavaScript

$(function(){
    $('.slider-arrow').click(function(){
        if($(this).hasClass('show')){
        $( ".slider-arrow, .panel" ).animate({
          left: "+=80%"
          }, 700, function() {
            // Animation complete.
          });
          $(this).html('«').removeClass('show').addClass('hide');
        }
        else {      
        $( ".slider-arrow, .panel" ).animate({
          left: "-=80%"
          }, 700, function() {
            // Animation complete.
          });
          $(this).html('»').removeClass('hide').addClass('show');    
        }
    });

});
  • 0
    ">>" изображение ушло куда-то еще. как закрыть эту панель
  • 0
    @ user2484319 его хорошо видно здесь jsfiddle.net/7a72x
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню