サムネイル付きのスライドショーで選択されているサムネイルに線をつけたい

Question

スライドショーについて質問です。

下記のようなスライドショーを作っているのですが、
選択されているときに、サムネイルの透過ではなく、
画像の回りに赤線を付けたいのですが、
記述の仕方が分からず、質問させていただけますか。
http://aqua2020.sakura.ne.jp/slide/

現在、選択されている時、
.thumb divに対して
opacity:0.5の設定になっていますが、
opacityはやめてborder:1px solid #ff0000;
を適用させたいです。

ソース内のopacityをborderに変え下記のように
してみましたが、うまくいかず、
ご教示いただけないでしょうか。

$(".thumb div").eq(this.index).fadeTo("slow",1px solid #ff0000);

<script type="text/javascript">
//Slide with thumbnails

var Slide = function(index){
  this.index = index;
  this.intvl = 6000;
}
Slide.prototype = {
  loop: function(){
    var myobj = this;

    if(this.tim_obj){
      clearTimeout(this.tim_obj);
    }

    this.screen();
    this.thumbnails();

    var elm = $(".thumb img").length;

    this.crnt_index = this.index;

    this.index++;
    if(this.index == elm){
      this.index = 0;
    }

    /*this.tim_obj = setTimeout(function(){
      myobj.loop();
    },this.intvl);*/ /*setTimeout…一定時間後に特定の処理をおこなう（繰り返さずに一度だけ）*/
  },
  changeImg: function(cl_index){
    this.index = cl_index;
    this.loop();
  },
  screen: function(){
    if(this.crnt_index != null){
      $(".screen div").eq(this.crnt_index).fadeTo("slow",0);
    }
    $(".screen div").eq(this.index).fadeTo("slow",1);
  },
  thumbnails: function(){
    if(this.crnt_index != null){
      $(".thumb div").eq(this.crnt_index).fadeTo("slow",1);
    }
    $(".thumb div").eq(this.index).fadeTo("slow",0.5);
  },
  thumb_onmouse: function(hv_index){
    this.hv_index = hv_index;
    var op = $(".thumb img").eq(this.hv_index).css("border");
    if(op == 1){
      $(".thumb img").eq(this.hv_index).fadeTo("normal",0.5);
    }
  },
  thumb_outmouse: function(out_index){
    this.out_index = out_index;
    if(this.out_index != this.crnt_index){
      $(".thumb img").eq(this.out_index).fadeTo("normal",1);
    }
  }
}

$(document).ready(function(){

  $(".screen div").each(function(){
    $(this).css("opacity",0);
  });

  var obj = new Slide(0);
  obj.loop();

  $(".thumb img").click(function(){
    var index = $(".thumb img").index(this);
    obj.changeImg(index);
  });

  $(".thumb img").hover(
    function(){
      var index = $(".thumb img").index(this);
      obj.thumb_onmouse(index);
    },
    function(){
      var index = $(".thumb img").index(this);
      obj.thumb_outmouse(index);
    }
  );
});

</script>

Answer 1

.thumb divに対して
.fadeTo("slow",1px solid #ff0000);
のところを、画像が選択されているときは
css({
"border: "1px solid #ff0000"
});
選択されていないときは
css({
"border: "1px solid #000000"
});
と記述することで、うまくいきました。
お騒がせしました。